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
Technical Skills:
Automated Testing
Excel
Microservices Architecture
Microsoft Package
Product Management
React
React Native
Software Architecture
Tableau
Max. participant group size: 10

Public discussion (0)

You must log in to send a new comment.