What are reactive values and what to be careful about with dependencies of useEffect?

Reactive values include state, props and all variables and functions declared directly inside of your component.

If your Effect’s code doesn’t use any reactive values, its dependency list should be empty ([]):

If your Effect depends on an object or a function created during rendering, it might run too often.

Avoid using an object created during rendering as a dependency. Instead, create the object inside the Effect. By itself, creating a function from scratch on every re-render is not a problem. You don’t need to optimize that. However, if you use it as a dependency of your Effect, it will cause your Effect to re-run after every re-render.

If your app uses server rendering (either directly or via a framework), your component will render in two different environments. On the server, it will render to produce the initial HTML. On the client, React will run the rendering code again so that it can attach your event handlers to that HTML. This is why, for hydration to work, your initial render output must be identical on the client and the server.