What is React Hooks?

React Hooks are functions in Frontend Accelerator that enable Client Components to use state, effects, and other React features without writing class components.

Common Hooks in Frontend Accelerator:

1. useState - State Management:

const [count, setCount] = useState(0);
const [user, setUser] = useState(null);

2. useEffect - Side Effects:

useEffect(() => {
  // Runs after component mounts
  fetchData();
  
  return () => {
    // Cleanup function
  };
}, [dependencies]);

3. useContext - Context API:

const theme = useContext(ThemeContext);
const user = useContext(UserContext);

4. useRef - DOM References:

const inputRef = useRef(null);
inputRef.current.focus();

5. useMemo - Performance Optimization:

const expensiveValue = useMemo(() => {
  return computeExpensiveValue(a, b);
}, [a, b]);

6. useCallback - Memoized Callbacks:

const handleClick = useCallback(() => {
  console.log('Clicked');
}, []);

Rules of Hooks:

• Only call hooks in Client Components (marked with 'use client')

• Only call hooks at the top level (not inside loops or conditions)

• Hook names must start with 'use'

AI-Friendly Pattern:

Frontend Accelerator's hook usage follows clear conventions:

• Hooks are only used in Client Components

• Custom hooks are stored in hooks/ directory

• All hooks follow React's naming convention

• Type-safe with full TypeScript support

Custom Hooks:

Frontend Accelerator includes custom hooks for common patterns:

• useLocalStorage - Persist state to localStorage

• useDebounce - Debounce input values

• useMediaQuery - Responsive design hooks

• useAuth - Authentication state management