React State Management

Context vs Redux


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.

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.


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

                  const MyContext = React.createContext(defaultValue);

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


State Management



Writing useLogger()


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

API Overview



Redux State Slice


Redux Middleware

Writing thunks

Redux DevTools


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


Presentation QR Code