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.

Topics

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: https://stackoverflow.com/users/3210677/andru
• 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. https://github.com/Driversnote-Dev/react-native-kontaktio