useEffect Dependencies

The second argument to useEffect is the dependency array.

React compares those values to the previous render. If one of them changed, it runs the effect again.

No array: every render

Empty array: mount only

Cleanup still runs when the component unmounts.

Named deps: when they change

If name is Ada, then Ada again, the effect does not re-run.

If name becomes Sam, it runs again.

List every value from the component that the effect reads

If you omit a dep, you may see a stale value. The linter plugin will warn you.

Do not cheat by turning the linter off. Fix the code.

Objects and functions as deps

A new object every render is a new identity. The effect would run every time.

Depend on the fields you actually use, or wrap the function in useCallback later.

Tip: Read the array as: run this when these things change. Empty means never again until unmount.