Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Working On Features
  3. Writing Hooks

Writing Hooks

Best practices for useEffect and custom hooks.

Quick Reference
When to use useEffect:
  • External systems only: DOM, timers, WebSocket, postMessage
  • State sync with non-React systems
When NOT to use useEffect:
  • ❌ Derived state from props (compute inline or use useMemo)
  • ❌ Data fetching (use GraphQL useQuery instead)
  • ❌ Syncing local state with props (use controlled components)
Custom hooks:
  • Extract all business logic from components
  • 🚨 ALL HOOKS MUST BE UNIT TESTED 🚨
  • Keep components display-only
When to Use useEffect
Only use useEffect for external systems outside our frontend codebase:
When NOT to Use useEffect
Derived State
Data Fetching
Syncing State with Props
Dependency Arrays
Critical rule: Only include dependencies if you want the effect to re-run when they change.
useRef for Callbacks
Use useRef for values that shouldn't trigger re-runs but need to stay current:
Cleanup Functions
Always return cleanup functions for subscriptions, timers, and event listeners:
Custom Hooks
Always extract React logic into custom hooks. Keep components display-only.
GraphQL Hooks
Testing
🚨 ALL HOOKS MUST BE UNIT TESTED 🚨 See Unit Testing for comprehensive hook testing patterns with React Testing Library.
Related Documentation
  • State Management - Zustand patterns for global state
  • Unit Testing - Testing hooks with RTL
  • GraphQL Operations - GraphQL query/mutation patterns
Reference Files
For more detailed technical guidance, see these reference files:
  • effect-when-to-use.md
  • effect-when-not-to-use.md
  • effect-dependency-arrays.md
  • effect-refs-for-callbacks.md
  • effect-cleanup.md
  • effect-syncing-state-antipattern.md
  • component-hook-extraction.md
Previous
Working on features / Forms
Next
Working on features / Styling
On this page
Quick Reference
When to Use useEffect
When NOT to Use useEffect
Derived State
Data Fetching
Syncing State with Props
Dependency Arrays
useRef for Callbacks
Cleanup Functions
Custom Hooks
GraphQL Hooks
Testing
Related Documentation
Reference Files