React (Native) State Management

Build a thorough understanding of state management in React/React Native Apps.

Prerequisite: You get most out of this workshop if you have a working experience with React (or React Native) as well as JavaScript/TypeScript.

Suitable for React and/or React Native teams

This workshop may be held in the context of React (web-app) or React Native (mobile app).

Hands on workshop

Topics are covered interactively via

1. live coding demos - in which I'll ask you many questions.
2. coding exercises - in which you'll write and/or refactor code.

Topics

The following topics are possible - all or a subset of them may be covered in a workshop.

React built-in state management

React itself offers tools for global state management.

Topics:

• Local reactive state with useState and useReducer hooks
• Lifting state up (method + issues)
• React Context: Global state management with context providers and consumers
• Custom hooks: Extract state management (i.e. business logic) into custom hooks

Zustand

The simple, yet powerful third-party state management library zustand is gaining more and more traction.

Topics:

• Simple global state management with zustand which are optimized to reduce unncessary re-renders
• Analyze state changes with Redux Dev Tools.
• Custom hooks to select state from zustand stores

Redux

The main focus of the workshop lies on the most-widely used third-party state management library for React: Redux.

Topics:

• Understand the Redux life-cycle
• Vanilla Redux (define action types, action state, reducer function etc. manually)
• state selector functions
• Analyze state changes with Redux Dev Tools
• Custom hooks to select state from the Redux store
• redux-toolkit: The modern and recommended way of using Redux
  • state slices
  • asynchronous actions with Redux thunks
• redux-saga middleware: Sophisticated orchestration of asynchronous events
  • Effects: take, call, put, race, delay etc.
  • blocking vs. non-blocking effects
  • create non-blocking tasks with the fork effect
  • Saga helpers (takeEvery, takeLatest etc.)
  • Understand interaction between Redux saga middleware and Redux reducer
• redux-persist: Persist state (or sub-states) for offline usage of your app

---

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