React Hooks Workshop

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

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. useMemo hook

14. useImperativeHandle hook

15. useSyncExternalStore hook (React 18)

16. Context + useContext hook

17. Debugging (incl. useDebugValue hook)

Extra

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

---

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!

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.