Question 1. What is useEffect in React?

• A hook for managing side effects (logging, API calls, subscriptions, localStorage, etc.).
• Runs after render, based on dependency array.

Dependency Behavior

1. useEffect(fn) → Runs after every render.
2. useEffect(fn, []) → Runs only once (on mount). Cleanup runs on unmount.
3. useEffect(fn, [dep1, dep2]) → Runs after mount and whenever dependencies change.

Key Notes

• Runs after rendering → cannot block UI paint.
• Dependencies compared by referential equality (e.g., ref.current updates don’t trigger).
• Cleanup: return a function to remove event listeners or cancel timers.

Downsides

• Overuse can cause performance issues (extra re-renders).
• Always executes after render, so updates inside can trigger another render.

Question 2. Essential State vs Derived State

• Essential State → Independent, minimal state (cannot be derived from others).
• Derived State → Calculated from essential state.

Example: Cart items = essential state, total price = derived state.