I'd like to run some code in my component, but only once.

function MyComponent() {
  const [dataLoaded, setDataLoaded] = createSignal(false);
  let actionPerformed = false; // This flag ensures the action runs only once

  createEffect(() => {
    // This effect runs whenever `dataLoaded()` changes.
    // However, the action inside will only execute the first time `dataLoaded()` is true.
    if (dataLoaded() && !actionPerformed) {
      console.log('Action triggered by signal and executed only once!');
      // Perform your one-time action here
      // For example, trigger an animation, show a notification, etc.

      actionPerformed = true; // Set flag to prevent future executions
    }
  });

  return (
    <div>
      <p>Data Status: {dataLoaded() ? 'Loaded' : 'Loading...'}</p>
      <button onClick={() => setDataLoaded(true)}>Simulate Data Load</button>
      <button onClick={() => setDataLoaded(false)}>Reset Data Status</button>
      {/* Resetting data status won't re-trigger the action if it's already run */}
    </div>
  );
}