Whetstone

React Hooks & Rendering

The hooks and rendering model a senior React dev is expected to have cold: state and functional updates, effects (and when not to use them), refs, referential identity (memo/useMemo/useCallback), controlled vs uncontrolled inputs, debounced autosave with timers, and untangling a component that has too many effects.

  1. 1. useState & functional updates

    Full · Core · ~25 min
    • React
    • Hooks
    • Component State
    • useState

  2. 2. useEffect — and when not to use it

    Full · Core · ~35 min
    • React
    • Hooks
    • Data Fetching
    • useEffect

  3. 3. useRef: mutable values & DOM refs

    Full · Core · ~25 min
    • React
    • Hooks
    • Refs
    • useRef
    • +1 moreAdditional skills: DOM

  4. 4. Memoization: memo, useMemo & useCallback

    Full · Advanced · ~30 min
    • React
    • Hooks
    • Rendering
    • useMemo
    • +4 moreAdditional skills: useCallback, Referential Identity, React.memo, Performance

  5. 5. Controlled vs uncontrolled inputs

    Full · Core · ~25 min
    • React
    • Refs
    • Forms
    • Component State
    • +1 moreAdditional skills: Controlled Components

  6. 6. Debounced input & autosave with timers

    Full · Advanced · ~30 min
    • React
    • Hooks
    • Timers
    • Debounce & Throttle
    • +3 moreAdditional skills: useEffect, useRef, Effect Cleanup

  7. 7. Untangling a component with too many effects

    Full · Advanced · ~30 min
    • React
    • Hooks
    • Rendering
    • useEffect
    • +2 moreAdditional skills: Derived State, Effect Cleanup