What does `useEffect` do and when should you use it?

Summary

useEffect synchronizes a component with external systems after React commits a render.

Longer Answer

Effects are for subscriptions, timers, imperative APIs, analytics, network calls in simple apps, and other work that must happen because the component is present on screen. They run after paint by default and can return cleanup functions.

Do not use effects for ordinary data derivation or event handling. If you can compute a value during render, compute it there. If work happens because a user clicked, put it in the event handler.

Key Points

• Effects are for subscriptions, timers, imperative APIs, analytics, network calls in simple apps, and other work that must happen because the component is present on screen
• They run after paint by default and can return cleanup functions
• Do not use effects for ordinary data derivation or event handling
• For 'What does useEffect do and when should you use it?', the key is to explain what problem the concept solves, where it fits in React's rendering model, and what mistake causes production bugs.

Do not use effects for ordinary data derivation or event handling. If you can compute a value during render, compute it there. If work happens because a user clicked, put it in the event handler

Comparison / Tradeoffs

Do not use effects for ordinary data derivation or event handling. If you can compute a value during render, compute it there. If work happens because a user clicked, put it in the event handler. |

Summary

useEffect synchronizes a component with external systems after React commits a render.

Longer Answer

For 'What does useEffect do and when should you use it?', the key is to explain what problem the concept solves, where it fits in React's rendering model, and what mistake causes production bugs.

Do not use effects for ordinary data derivation or event handling. If you can compute a value during render, compute it there. If work happens because a user clicked, put it in the event handler.

Key Points

• For 'What does useEffect do and when should you use it?', the key is to explain what problem the concept solves, where it fits in React's rendering model, and what mistake causes production bugs
• Do not use effects for ordinary data derivation or event handling
• If you can compute a value during render, compute it there
• Use the answer to connect the concept back to a realistic production or interview scenario for 'What does useEffect do and when should you use it?'

Comparison / Tradeoffs