React Hooks & Components

When to use this skill

• Creating functional components.
• Designing custom hooks.
• optimizing re-renders.

1. Hooks Rules

• Top Level: Only call hooks at the top level of the component/hook.
• Dependencies: Be honest with dependency arrays in useEffect, useCallback, and useMemo. Use linter to enforce.

2. Memoization

• UseMemo/UseCallback: Use only when the calculation is expensive OR when passing functions/objects as props to memoized children. Over-memoization adds overhead.
• Stable References: Remember that objects/arrays defined inside component body are new references every render.

3. Component Composition

• Props: Pass children (slots) instead of prop drilling complex state.
• Container/Presenter: Separate logic (data fetching) from UI rendering where complex.

4. State Management

• Local vs Global: Keep state as local as possible. Move up only when siblings need to share it.
• Context: Use Context for low-velocity global data (theme, user). For high-velocity data, use a signal-based library or optimized subscriber pattern.