Effects
Synchronize with external systems, clean up subscriptions, and avoid unnecessary effects.
Effects synchronize a component with something outside React: a network connection, browser API, media player, or third-party widget. They are not a general place for calculations.
Synchronize and clean up
Connection.tsx
useEffect(() => {
const connection = createConnection(roomId);
connection.connect();
return () => connection.disconnect();
}, [roomId]);
Dependencies list every reactive value read by the effect. Cleanup runs before resynchronizing and when the component leaves the tree.
You might not need an effect
Calculate derived data while rendering. Handle interaction consequences in the event handler. Reset state with component keys. Memoize only expensive pure calculations.
Keep this
Use effects only for external synchronization, declare complete dependencies, and clean up everything the effect starts.
Your place is saved on this device.