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.