React State Management

Context vs Redux

Disclaimer

Q: Are Context and Redux the same thing?

A: No. They are different tools that do different things, and you use them for different purposes.

by Mark Erikson

"Why React Context is Not a "State Management" Tool (and Why It Doesn't Replace Redux)"
Artiom Matusenco

Artiom Matusenco

JavaScript Team Lead at Lohika / Capgemini Engineering

6+ years of experience in building scalable WEB solutions for various industries.

LinkedIn: artiom-matusenco

Application State Management

What’s State Management

in a Nutshell?

State management is simply a way to engender communication and sharing of data across components.

It creates a concrete data structure to represent your app's State that you can read and write.

by Mihaela @ WorksHub

State Management Battle in React 2021: Hooks, Redux, and Recoil

Demo-Application

Context API and Hooks

What is the React Context?

Context is a dependency injection mechanism. Any value put in Context is available implicitly for downstream components.

Context API

React.createContext
                
                  const MyContext = React.createContext(defaultValue);
Context.Provider
useContext

So how to build State Management using React Context?

The composition of useReducer and useContext hooks together allows to implement a simple state management system which is more equivalent to what Redux does with React.

State Management

useReducer

State Management

useContext

Debugging

Writing useLogger()

Redux

How to think about Redux

So the way I would distinguish it is: Redux is a very generic state management tool that can be used for a broad array of use cases. Caching state from a server UI state other complex data management on the client

by Mark Erikson

"When (and when not) to reach for Redux"

API Overview

Provider
Store

API OVERVIEW

Redux State Slice

Redux Middleware

Writing thunks

Redux DevTools

Conclusions

There are many excellent reasons to choose Redux:

  • Consistent architectural patterns
  • Debugging capabilities
  • Middleware
  • Addons and extensibility
  • Cross-platform and cross-framework usage
  • Depending on your app's setup, much better performance than working with just Context

Redux is most useful when in cases when:

  • You have large amounts of application state that are needed in many places in the app
  • The app state is updated frequently
  • The logic to update that state may be complex
  • The app has a medium or large-sized codebase, and might be worked on by many people
  • You need to see how that state is being updated over time

When to use Context API?

If you're only using Redux to avoid passing down props, context could replace Redux - but then you probably didn't need Redux in the first place.

by Mark Erikson

Q&A

Presentation QR Code

THANK YOU!