React Hooks Workshop

A workshop which dives deep into all React built-in hooks

Getting Started

Prerequisites

• Node.js >= 20.0.0
• npm or yarn package manager

Installation

1. Clone the repository:

   git clone https://github.com/andrekovac/react-hooks-workshop.git
   cd react-hooks-workshop

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser and navigate to the URL shown in the terminal (typically http://localhost:5173)

Available Scripts

• npm run dev - Start the development server
• npm run build - Build the project for production
• npm run preview - Preview the production build locally
• npm run lint - Run ESLint to check code quality

React Compiler Configuration

This project includes React Compiler support. You can enable or disable it in vite.config.ts:

constReactCompilerConfig={sources: (_filename: string)=>{returntrue;// true = enabled, false = disabled},};

See the React Compiler section for interactive examples and learning exercises.

Structure of this document

• The heart of this document are the "CodeSandBox" links. Most of them are written in TypeScript, some in JavaScript (marked by "(JS)")
• One part of the document is a journey which gradually introduces hooks via <Counter /> scenarios.
• Besides there are other examples which cover other hooks or interesting points concerning hooks.

Topics

1. React hook Definition

2. React state basics

3. Async setting and retrieval

4. useRef hook

5. useEffect hook

   • dependency array
   • how to prevent race conditions when fetching data

6. useCallback hook

   • Covering "Removing dependencies: functions" heuristics

7. custom hooks

8. useEffect and useState interplay

   • Covering "Removing dependencies: values" heuristics

9. useReducer

10. useLayoutEffect

    Topics covered:

    • useLayoutEffect vs. useEffect
    • a-typical use of useState setter function
    • useEffect/useLayoutEffect dependency array with refs
    • React hooks lifecycle

11. class vs. function components

12. React.memo HOC performance improvement

    Topics covered:

    • how to avoid unnecessary React re-renderings
    • Interplay with useCallback hook
    • How change in props triggers re-renderings
    • Discussion of code organization

13. React Compiler (React 19+)

    Topics covered:

    • Automatic memoization vs manual optimization
    • What React Compiler can and cannot optimize
    • Interactive examples with enable/disable exercises
    • React Compiler limitations and real-world considerations
    • When to still use React.memo, useCallback, and useMemo
    • Reference stability and prop comparison

14. useMemo hook

15. useImperativeHandle hook

16. useSyncExternalStore hook (React 18)

17. useEffectEvent hook (React 19.2+)

    Topics covered:

    • Reading latest props/state in Effects without re-runs
    • Analytics and logging patterns
    • Effect Event rules and ESLint enforcement
    • Comparison with useCallback

18. Context + useContext hook

19. Debugging (incl. useDebugValue hook)

20. Concurrent Mode

    Topics covered:

    • Suspense component
    • ErrorBoundary component
    • useTransition hook
    • useDeferredValue hook
    • useTransition and useDeferredValue interplay
    • useTransition and useDeferredValue with useEffect

Extra

• usePrevious hook
• useState error: setState on unmounted component
• batched useState calls
• React Strictmode
• Composition

---

Further Comments

• The provided links to the React library are from its server implementation. They however exemplify their functionality better then the hook definitions in other parts of the React codebase because they are more abstract there.
• Working through all of the examples as part of a workshop will take at least one day, more realistically 1.5 days.
• This is a living document and far from perfect. I'll gradually improve it here and there and add new notes and examples.

Thanks

This course is a collection of code examples which were inspired by other blog articles and code snippets written by wonderful developers. Sometimes I just adapted them from others. I learned a lot from them while working through their articles and examples. Thanks so much! The sections sometimes contain links to other helpful articles.

I have to point out one article in particular here: Many examples in this course are based on Dan Abramov's blog article A Complete Guide to useEffect. Thanks for this very enlightning read!

And a huge thanks to all my students with whom I worked through the examples. Your questions and comments are continuously improving this course. Thanks!

StackBlitz Links

Open any example directly in StackBlitz:

React State Basics:

• Internal vs External State
• Mutable vs Immutable
• One State Change All New
• Setter Creates New Objects
• useState Basic

Async Setting and Retrieval:

• Async Setting
• Async Retrieval (Primitive)
• Async Retrieval (Object)

useRef:

• Ref vs State vs Local
• Ref vs External Variable
• Async State Timeout Ref

useEffect:

• Fetch Movies
• Race Condition
• useEffect/useState Interplay

useReducer:

• useReducer Demo

Class vs Function:

• Class vs Function

Performance:

• Performance Overview
• Part 1: Preventing Re-renders
• Part 2: Memoization with Handlers

React Compiler:

• React Compiler - Page 1 Problem
• React Compiler - Page 1 Solution
• React Compiler - Page 2 Problem
• React Compiler - Page 2 Solution

Custom Hook:

• Custom Hook Demo

useEffectEvent:

• useEffectEvent Demo

useLayoutEffect:

• useLayoutEffect Demo

useCallback:

• useCallback Demo

Great resources

• React eli5 Eli5 (explained like a 5 years old) are great articles for every topic. It's great that there's one for React, too.