React Hooks: Deep Dive.

An advanced React workshop which dives deep into almost all of React built-in hooks and beyond.

Prerequisite: You get most out of this workshop if you have a working experience with React and JavaScript/TypeScript.

Hands on workshop

Topics are covered interactively via

  • 1
    live coding demos 🎓🖥 - in which I'll ask you many questions.
  • 2
    explorative coding tasks 🔭 - in which you'll tinker with code to discover the workings of React hooks.
  • 3
    coding exercises 💻 - in which you'll write and/or refactor code.


This wide range of topics may be covered. Depending on the available time we'll collect the topics from this list which are most relevant to you.

State (useState)

  • build a deep understanding of the useState hook
  • Learn about the difference between a React component "rendering" vs. browser "rendering"
  • Async setting and retrieval of state
  • state batching in React 18
  • Role of JavaScript closures
  • shallow vs. deep copies in JavaScript
  • Comparison between legacy class components and function component
  • NEW: Communication between parent and child components. Lifting state up - passing data via callbacks vs. passing data via props

Effects (useEffect)

  • Truly understand the React hooks lifecycle and how it is tied into browser rendering
  • Understand the effect of React 18 StrictMode during development
  • Understand the prompts of the react-hooks/exhaustive-deps ESLint rule
  • Fix useEffect hook depedency array issues


Solve special UI issues with this rarely used hook.

useRef hook

  • render-neutral data storage
  • Imperative UI state management

Custom hooks

  • Create hooks with a uniquely defined API
  • TypeScript challenges when typing custom hooks
  • how to separate UI and business logic via hooks

useEffect and useState hook interplay

useReducer hook

for more sophisticated state management

Performance optimization

  • React.memo is not a silver-bullet
  • The role of useCallback hook to reduce component re-renders
  • useMemo hook to memoize expensive computations

useImperativeHandle hook

In combination with React.forwardRef to customize instance values

Some facts regarding my React + React Native experience:

  • ⚛️ React + React Native development since December 2015. Choice of technology at the time as CTO of a tech startup.
  • Extensive TypeScript experience since 2017 - began using TS together with React when TS didn’t support JSX yet.
  • Top 5% worldwide in React-Native and JavaScript on StackOverFlow
  • Technology Trainer for React Native/React/TypeScript. Held workshops at clients like Barclays, McKinsey, REWE, DATEV, DMTech among others.
  • Speaker and workshop leader for React Native/React/TypeScript at professional conferences (e.g. c't webdev, ReactNext, WeAreDevelopers World Congress)
  • Author of React Native open-source bridging modules and open-source contributor, e.g. react-native-kontaktio
  • Personal blog: explainprogramming.com

Interested? 😊