useEffect

It's for synchronising a component with an external system.

E.g.:

• an event listener,
• a WebSocket,
• a timer,
• integrating a third-party library.

useEffect(() => {
  const handler = () => {};

  window.addEventListener("resize", handler);

  return () => {
    window.removeEventListener("resize", handler);
  };
}, []);

Cleanup runs before the effect runs again and on unmount.

Good to know: not every piece of logic after a render belongs in useEffect.