React Component Lifecycle with Hooks

Lifecycle phases

In function components, lifecycle is expressed using render + effects:

• Mount: first render
• Update: subsequent renders due to state/props/context changes
• Unmount: cleanup before removal

Lifecycle with useEffect

useEffect(() => {
  // runs after render
  return () => {
    // cleanup on unmount or before next effect run
  };
}, [dependency]);

Common lifecycle tasks

• API calls and cancellation
• Subscriptions (websocket, events)
• Timers and intervals
• Analytics tracking

Cleanup is mandatory

Always cleanup subscriptions/timers to prevent memory leaks.

Next, we will style React components effectively.