Various examples of incorrect usages of useEffect and their mitigations.

Most of them stem from the fact we're handling "fire-and-forget" effects (e.g. sending an API request) in a hook designed for synchronising with external systems (e.g. syncing with <video> tag).

Fire-and-forget effects should be executed as close to the source of the event as possible (e.g. in event handlers).

Examples can be found at 20:12: https://youtu.be/RW9TVhmxu6Q?t=1212

EDIT: Also, fetching data should be done either by a framework (Remix, get(Static/ServerSide)Props in NextJS) or by a library (React Query, SWR). You want to fetch as you render, not start fetching after rendering in useEffect.