React Hooks Pitfalls and Best Practices

// ✅
function MyComponent() {
  const [count, setCount] = useState(0);
  // ...
}

// ❌
if (condition) {
  useEffect(() => {});
}

# Do not call hooks in conditions, loops, or nested functions.

function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(true);
  return isOnline;
}

# Do not call hooks from regular utility functions.

npm install -D eslint-plugin-react-hooks

# Catch rules-of-hooks and dependency mistakes early.

useEffect(() => {
  const id = setInterval(() => {
    console.log(count); // can go stale if dependencies are wrong
  }, 1000);
  return () => clearInterval(id);
}, [count]);

# Effects and callbacks capture values from the render where they were created.

const options = useMemo(() => ({ roomId, serverUrl }), [roomId, serverUrl]);
useEffect(() => {
  const conn = createConnection(options);
  conn.connect();
  return () => conn.disconnect();
}, [options]);

# Avoid recreating dependency objects every render when identity matters.

useEffect(() => {
  subscribe(userId);
  return () => unsubscribe(userId);
}, [userId]);

# Keep effects focused on synchronization.

// Not every derived value needs useMemo.
const fullName = `${firstName} ${lastName}`;

# Memoization has a cost; use it when it solves a concrete problem.

// Prefer deriving directly:
const filtered = items.filter(item => item.active);

// Instead of syncing derived state in an effect.

# Avoid effects that only derive data from props/state.

function handleSave() {
  saveDraft(form);
}

<button onClick={handleSave}>Save</button>

# Do not move user-triggered logic into effects unnecessarily.