Building a Custom useEffect Hook in React

Your task is to implement a custom useEffect hook in React using TypeScript. This custom hook should mimic the core functionality of React's built-in useEffect hook, allowing you to run side effects in function components. This exercise will deepen your understanding of React's rendering lifecycle, dependency tracking, and how to manage side effects effectively.

Problem Description

You need to create a custom hook named useCustomEffect that accepts two arguments: a callback function representing the side effect and an optional dependency array. This hook should execute the callback when the component mounts and whenever any of the dependencies in the array change. If the callback returns a cleanup function, it should be executed before the next effect runs or when the component unmounts.

Key Requirements:

1. Callback Execution: The provided callback function should be executed after the component renders.
2. Dependency Tracking:
   • If no dependencyArray is provided, the callback should run after every render.
   • If an empty dependencyArray ([]) is provided, the callback should only run once after the initial render (similar to componentDidMount).
   • If a dependencyArray with values is provided, the callback should run after the initial render and any subsequent render where at least one dependency in the array has changed its value.
3. Cleanup Function: If the callback returns a function, this returned function should be treated as a cleanup function.
   • The cleanup function should be executed before the next effect runs (if dependencies change).
   • The cleanup function should be executed when the component unmounts.
4. Type Safety: The hook should be implemented using TypeScript, ensuring type safety for the callback and dependency array.

Expected Behavior:

The useCustomEffect hook should integrate seamlessly into a React functional component, behaving like the standard useEffect.

Edge Cases:

• No Dependency Array: Ensure the callback runs on every render.
• Empty Dependency Array: Ensure the callback runs only once on mount.
• Dependencies Change: Verify that the callback and cleanup logic correctly handle dependency changes.
• Callback Returns Nothing: The hook should gracefully handle callbacks that don't return a cleanup function.
• Callback Returns undefined: This is functionally the same as returning nothing.

Examples

Example 1: Effect on Mount Only

import React, { useState } from 'react';
import { useCustomEffect } from './useCustomEffect'; // Assuming your hook is in this file

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

  useCustomEffect(() => {
    console.log('Component mounted or count changed to:', count);
    document.title = `You clicked ${count} times`;

    return () => {
      console.log('Cleanup for count:', count);
      // Potentially reset document title or unsubscribe from something
    };
  }, [count]); // Dependency array includes 'count'

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Input: User clicks the "Click me" button multiple times.

Output:

• Initial Render:
  • Component mounted or count changed to: 0
  • document.title is set to "You clicked 0 times"
• After first click (count becomes 1):
  • Cleanup for count: 0
  • Component mounted or count changed to: 1
  • document.title is set to "You clicked 1 times"
• Subsequent clicks: The pattern of cleanup then effect execution repeats.
• Component Unmount:
  • Cleanup for count: [final count]

Explanation: The effect runs on mount because of the initial render. When count changes, the previous cleanup function is executed, and then the new effect runs with the updated count.

Example 2: Effect on Mount Only (Empty Dependency Array)

import React, { useState } from 'react';
import { useCustomEffect } from './useCustomEffect';

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

  useCustomEffect(() => {
    console.log('Fetching data...');
    // Simulate API call
    setTimeout(() => {
      setData('Some fetched data');
      console.log('Data fetched!');
    }, 1000);

    return () => {
      console.log('Cancelling data fetch...');
      // In a real scenario, you might cancel an ongoing fetch request
    };
  }, []); // Empty dependency array

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

Input: The DataFetcher component is rendered.

Output:

• Initial Render:
  • Fetching data...
  • Loading... is displayed.
• After 1 second:
  • Data fetched!
  • Data: Some fetched data is displayed.
• Component Unmount:
  • Cancelling data fetch...

Explanation: Because the dependency array is empty, the effect only runs once after the initial render. The cleanup function runs only when the component unmounts.

Example 3: Effect on Every Render (No Dependency Array)

import React, { useState } from 'react';
import { useCustomEffect } from './useCustomEffect';

function RenderTracker() {
  const [updates, setUpdates] = useState(0);

  useCustomEffect(() => {
    console.log('This effect runs on every render.');
    // Example: Tracking render counts, though typically this isn't how you'd do it
  }); // No dependency array

  return (
    <div>
      <p>Render count: {updates}</p>
      <button onClick={() => setUpdates(updates + 1)}>
        Trigger Re-render
      </button>
    </div>
  );
}

Input: User clicks the "Trigger Re-render" button.

Output:

• Initial Render:
  • This effect runs on every render.
• After clicking button:
  • This effect runs on every render. (This will be logged after the previous effect's cleanup, if any).

Explanation: Without a dependency array, the effect callback and its cleanup (if it returns one) will execute after every single render of the component.

Constraints

• React Version: Assume you are using React 18+.
• TypeScript Version: Assume a modern version of TypeScript (e.g., 4.0+).
• Performance: Your implementation should be reasonably efficient. Avoid unnecessary recalculations or excessive memory usage.
• No External Libraries: Do not use any third-party libraries that provide effect management or hook utilities. You are building this from scratch.
• React Internals: You will need to infer or simulate how React manages effects and their execution order. You won't have direct access to React's internal state management for hooks.

Notes

• Consider how React typically schedules effects to run after the DOM has been updated.
• Think about how to keep track of the previous dependencies to detect changes.
• Managing the lifecycle of effects (mount, update, unmount) is crucial.
• You'll likely need to use useState or useRef within your hook to store state related to the effect's execution.
• This challenge is about understanding the principles of useEffect. You might need to make some assumptions about how React's internal mechanisms work to simulate the behavior. For instance, you'll need a way to detect component unmount. A common pattern in custom hooks is to use onUnmount from a higher-order component or a more complex simulation of React's fiber lifecycle. For this challenge, focus on the logic of dependency comparison and cleanup execution. You might need to simulate the "unmount" scenario for testing purposes. A simpler approach for this exercise could be to assume a mechanism exists to trigger cleanup when the "component is considered unmounted" by your simulated environment.
• A common way to simulate the execution flow in a custom hook is to have an outer function that manages the hook's state across renders and calls your hook logic.