Skip to content

Logic in Hooks ​

Hooks are the place for business logic, side effects, async tasks, and state derivation. Keeping them small, clear, and single-purpose ensures better readability, testability, and reuse.

Key points for developers ​

  • Each hook must handle one logic only if possible.
  • Hook name and return values must clearly explain what it does without reading its body.
  • Do not define helper functions inside hooks → use a global helpers/ directory.
  • Return data and actions only, never React nodes.
  • For complex logic, split into multiple hooks and compose results via the parent component or a higher-level hook.

React "Rules of Hooks" (always follow) ​

  1. Call hooks only at the top level. No loops, conditions, or nested functions.
  2. Call hooks only from React function components or other custom hooks.
  3. Keep effect/callback/memo dependency arrays complete and correct.