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
- 1live coding demos 🎓🖥 - in which I'll ask you many questions.
- 2explorative coding tasks 🔭 - in which you'll tinker with code to discover the workings of React hooks.
- 3coding 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 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
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. react-native-kontaktio
- Personal blog: explainprogramming.com