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)
- Call hooks only at the top level. No loops, conditions, or nested functions.
- Call hooks only from React function components or other custom hooks.
- Keep effect/callback/memo dependency arrays complete and correct.