How do you think about useEffect dependencies?

The dependency array is not a scheduling hint. It is the list of inputs the effect depends on. If the effect reads a value from the component scope and that value can change between renders, it belongs in the array. Omitting it lets the effect close over an old render's value.

function Room({ roomId, serverUrl }) {
  useEffect(() => {
    const connection = createConnection(serverUrl, roomId);
    connection.connect();

    return () => connection.disconnect();
  }, [roomId, serverUrl]);
}

What counts as reactive

• Props and state
• Values computed from props or state during render
• Functions declared in the component that close over reactive values
• Context values read with useContext

Objects, arrays and functions get a new identity on every render. If an effect depends on one, it may re-run more often than expected. Move stable values outside the component, memoize them when appropriate, or restructure the effect so it depends on primitive inputs instead of a freshly created object.

function Search({ query }) {
  useEffect(() => {
    const id = setTimeout(() => {
      searchApi(query);
    }, 300);

    return () => clearTimeout(id);
  }, [query]);

  return <input value={query} readOnly />;
}