React Hooks Deep Dive

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

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 components
  • 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
  • useLayoutEffect: 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.
Technical Skills:
Automated Testing
Cyber Security
Data Analytics & Insights
Digital Skills
Machine Learning
Microservices Architecture
Microsoft Package
Product Management
React Native
Software Architecture
Software Development
User Experience
Max. participant group size: 10

Public discussion (0)

You must log in to send a new comment.