useEffectOnce: A React Hook for Single Execution

React's useEffect hook is powerful, but sometimes you only want a side effect to run once, on mount, and never again. This challenge asks you to create a custom hook, useEffectOnce, that encapsulates this behavior, providing a cleaner and more concise way to manage single-execution side effects in your React components. This hook is useful for initializing data, setting up event listeners, or performing any action that should only happen once.

Problem Description

You need to implement a custom React hook called useEffectOnce. This hook should mimic the functionality of useEffect but ensure that the provided effect function is only executed once during the component's lifecycle – specifically, on the initial mount. Subsequent re-renders of the component should not trigger the effect function again.

Key Requirements:

• Single Execution: The effect function should be executed only once.
• Dependency Array: The hook should accept a dependency array, similar to useEffect. If the dependencies change between renders, the effect should not re-run. This is to ensure that if the dependencies remain the same, the effect is truly only run once.
• Cleanup Function: The hook should also accept an optional cleanup function, which should be executed when the component unmounts. This cleanup function should only be called once, mirroring the single-execution nature of the effect.
• TypeScript: The implementation must be in TypeScript.

Expected Behavior:

When useEffectOnce is called within a functional component:

1. On the initial mount, the effect function is executed.
2. On subsequent re-renders, the effect function is not executed unless the dependency array is empty.
3. When the component unmounts, the cleanup function (if provided) is executed.

Edge Cases to Consider:

• Empty Dependency Array: If the dependency array is empty ([]), the effect should run only once on mount, regardless of any other state changes.
• No Dependencies: If no dependency array is provided, the effect should run only once on mount.
• Cleanup Function: The cleanup function should be executed only once, on unmount.
• Multiple Calls: What happens if useEffectOnce is called multiple times within the same component? Each call should behave as described above, independently.

Examples

Example 1:

// Component: MyComponent.tsx
import React, { useState } from 'react';
import { useEffectOnce } from './useEffectOnce'; // Assuming you've created useEffectOnce.ts

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffectOnce(() => {
    console.log("Effect ran on mount!");
    // Perform some initialization logic here
  }, []); // Empty dependency array - runs only once

  useEffectOnce(() => {
    console.log("Effect ran on mount with count:", count);
  }, [count]); // Runs only once initially, then never again

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default MyComponent;

Output:

"Effect ran on mount!"
"Effect ran on mount with count: 0"

Explanation: The first useEffectOnce runs once on mount because of the empty dependency array. The second useEffectOnce runs once on mount with the initial count of 0. Subsequent clicks on the button increment the count, but the effect functions do not re-run.

Example 2:

// Component: AnotherComponent.tsx
import React, { useState, useEffect } from 'react';
import { useEffectOnce } from './useEffectOnce';

function AnotherComponent() {
  const [data, setData] = useState<string | null>(null);

  useEffectOnce(() => {
    console.log("Fetching data on mount...");
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(result => setData(result.value));
    return () => {
      console.log("Cleaning up data fetch...");
    };
  }, []);

  return (
    <div>
      {data ? <p>Data: {data}</p> : <p>Loading...</p>}
    </div>
  );
}

export default AnotherComponent;

Output:

"Fetching data on mount..."
// After fetch completes:
"Data: [some data]"

Explanation: The effect fetches data on mount. The cleanup function is called when the component unmounts. The data is only fetched once.

Constraints

• Time Complexity: The hook's implementation should have a time complexity of O(1) for each call.
• Memory Usage: The hook should not introduce any unnecessary memory leaks.
• TypeScript: The code must be written in TypeScript and adhere to good TypeScript practices.
• React Version: Assume React 18 or later.

Notes

• Consider using a ref to track whether the effect has already been executed.
• Think about how to handle the cleanup function correctly to ensure it's only called once.
• The goal is to create a reusable hook that provides a clean and concise way to manage single-execution side effects in React components. Focus on clarity and correctness.