Workshop
React Hooks & State
Deep dive into React's built-in hooks, then state management from Context to Zustand and Redux. Works for React and React Native teams.
Prerequisite
Best with working React (or React Native) + JavaScript/TypeScript experience.
Hands-on format
- Live coding demos 🖥, with plenty of questions.
- Explorative tasks 🔭, tinker to discover how hooks really work.
- Coding exercises 💻, write and refactor real code.
What we cover
A menu of topics, depending on time, we pick the ones most relevant to your team together.
useState, truly understood
- Component "render" vs browser render
- Async set & retrieval, batching in React 18
- JavaScript closures, shallow vs deep copies
- Lifting state up: callbacks vs props
useEffect & the lifecycle
- The hooks lifecycle tied to browser rendering
- React 18 StrictMode in development
- exhaustive-deps & fixing dependency arrays
The rest of the hooks
- useLayoutEffect for tricky UI
- useRef: render-neutral storage & imperative state
- useReducer for richer state
- Custom hooks: clean APIs, TypeScript, separating logic from UI
- useImperativeHandle with forwardRef
Performance
- Why React.memo is no silver bullet
- useCallback to cut re-renders
- useMemo for expensive work
State management
- Built-in: useReducer, Context, custom hooks
- Zustand: simple global state & selectors
- Redux with redux-toolkit: slices & thunks
- redux-saga for async orchestration
- redux-persist for offline state
Why with me
I've built with React & React Native since December 2015, chose it back then as a startup CTO, and have trained teams at Barclays, McKinsey, REWE, DATEV and Condor ever since. Top 5% worldwide on Stack Overflow for React Native & JavaScript, and I lead the React/React Native track at Workshops.de.
Bring this workshop to your team
Remote or on-site, tailored to your team's level.