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.