Avoid recreating dependency objects every render when identity matters.
Section: Effect Dependency Pitfalls
Memoize objects used in dependencies
tsx
tsx
const options = useMemo(() => ({ roomId, serverUrl }), [roomId, serverUrl]);
useEffect(() => {
const conn = createConnection(options);
conn.connect();
return () => conn.disconnect();
}, [options]);Explanation
Changing object identity retriggers effects even when fields look the same.
Learn the surrounding workflow
Compare similar commands or jump into common fixes when this command is part of a bigger troubleshooting path.
Related commands
Same sheet · prioritizing Effect Dependency Pitfalls
Stale closure pitfall
Effects and callbacks capture values from the render where they were created.
Move non-reactive logic out of effects
Keep effects focused on synchronization.
Do not memoize everything
Memoization has a cost; use it when it solves a concrete problem.
Call hooks only at the top level
Do not call hooks in conditions, loops, or nested functions.
Call hooks only from components or custom hooks
Do not call hooks from regular utility functions.
Derive data during render when possible
Avoid effects that only derive data from props/state.