Call hooks only from components or custom hooks

tsx

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

Explanation

A custom hook is just a function whose body legitimately uses other hooks.

Learn the surrounding workflow

Compare similar commands or jump into common fixes when this command is part of a bigger troubleshooting path.

Same sheet · prioritizing Rules of Hooks

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

Open In sheettsxsame section

Catch rules-of-hooks and dependency mistakes early.

Open In sheetbashsame section

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

Open In sheettsx2 tag match

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

Open In sheettsx2 tag match

Avoid recreating dependency objects every render when identity matters.

Open In sheettsx2 tag match

Avoid effects that only derive data from props/state.

Open In sheettsx2 tag match