Q7: How does useEffect manage side-effects, dependencies, and cleanup cycles?

useEffect executes side-effects after the component renders and DOM updates are committed. The dependency array controls when the effect executes: omitting it runs after every render, an empty array [] runs once on mount, and passing dependencies [a, b] runs when specified variables change. Returning a function triggers cleanup before re-executing or unmounting.

useEffect Execution & Cleanup Lifecycle

useEffect Subscription & Cleanup Pattern

useEffect(() => {
  const subscription = api.subscribeToData(id);
  
  // Cleanup closure function
  return () => {
    subscription.unsubscribe();
  };
}, [id]); // Re-subscribes if 'id' changes

💡 The returned unsubscribe function runs before re-subscribing on id change or when the component unmounts.

Key Takeaways

Runs asynchronously after paint to prevent blocking browser rendering.
Cleanup function executes prior to effect re-execution and component unmounting.

Knowledge Check

When does the cleanup function returned inside useEffect execute?

Q7: How does useEffect manage side-effects, dependencies, and cleanup cycles?

STAY UPDATED WITH BYTES!