State Management In React

Articles & Tutorials

How to choose the right React state management solution (blog.logrocket.com)
Jun 10, 2021
In this article, we’ll cover common use cases for managing state in React and learn when you should consider using each solution. Let’s accomplish this by building a simple counter app.
  • Iva Kop
Zustand’s Guide to Simple State Management (blog.bitsrc.io)
May 07, 2021
In this article, I will explore Zustand, which provides a lightweight and straightforward way of managing state in React.
  • Madushika Perera
Using state machines with XState and React (blog.logrocket.com)
May 04, 2021
In this article, we’ll use XState, as it’s one of the easiest and most efficient ways to handle state in any JavaScript application, rather than being framework agnostic.
  • Ishan Manandhar
React State Management Libraries and How to Choose (daveceddia.com)
Mar 17, 2021
In this post I’ll give you the Grand Tour of state management options in React and help you decide which one to use in your project.
How to Use Finite State Machines in React (telerik.com)
Mar 17, 2021
Learn about finite state machines, the advantages of this computer science concept and how we can use it in React apps.
  • Leonardo Maldonado
Using Zustand to simplify state management (blog.logrocket.com)
Mar 10, 2021
I, for one, am excited about the growing number of new ways to manage your state. In this article, I’ll cover probably the simplest and smallest of all: Zustand.
  • Lorenz Weiß
The easy-peasy React state management library (flaviocopes.com)
Mar 05, 2021
Every application needs to manage state. In React, we can go a long way using hooks, and in particular useState(), and passing props around. When things get more complicated than that, I like to immediately jump to a state management library. One of my favorites lately is easy-peasy.
Using Immer with React: a Simple Solutions for Immutable States (blog.bitsrc.io)
Feb 24, 2021
Why Immer works well for React State Immutability?
  • Madushika Perera
Introduction to MobX with React (blog.logrocket.com)
Jan 20, 2021
In this tutorial, we will discuss how to use MobX with React, but first, we will begin by getting to understand MobX a little better.
  • Aleem Isiaka
Why React Context is Not a "State Management" Tool (and Why It Doesn't Replace Redux) (blog.isquaredsoftware.com)
Jan 18, 2021
Definitive answers and clarification on the purpose and use cases for Context and Redux.
  • Mark Erikson
React patterns to avoid common pitfalls in local state management (blog.logrocket.com)
Nov 11, 2020
In this discourse, our focus will be on local state management and the various React patterns we can use to avoid its common pitfalls.
  • Lawrence Oputa
How to Switch from Redux to Recoil (telerik.com)
Nov 03, 2020
Like Redux, Recoil is state management library in React. Let’s look at the differences and how to make the switch when you’re ready.
  • Peter Mbanugo
React State 5 Ways (dev.to)
Oct 05, 2020
In this post I'm going to walk through how to implement global state management in a React application using the same pattern across 5 of the most popular libraries and APIs using the most modern and up-to-date versions of the libraries.
React Query — An Underrated State Management Tool (blog.bitsrc.io)
Sep 18, 2020
In this article, let’s discuss how React Query addresses the above-mentioned issue by building a small pokemon application and diving into its key concepts.
  • Tharaka Romesh
My State Management Mistake (epicreact.dev)
Sep 17, 2020
When I started at PayPal, the app I started with used Redux for its state management (like pretty much every other React app at the time). This was the first React product I'd ever worked on and I was excited to use the latest and greatest tools for state management.
How to Persist React State in Local Storage (felixgerschau.com)
Sep 15, 2020
In this post, I'll first introduce you to the localStorage API before we have a look at how to use it in React function components with React hooks.
  • Felix Gerschau
Understand Recoil in React (telerik.com)
Sep 08, 2020
Learn about the new library introduced by Facebook called Recoil, which aims to solve a few problems such as shared state, derived data and queries, app-wide observation, and many more.
  • Leonardo Maldonado
Creating your first CRUD with Facebook’s Recoil (blog.logrocket.com)
Aug 18, 2020
Our goal is to explore some of Recoil’s main features in practice.
  • Diogo Souza
Recreating Facebook's Recoil library (krasimirtsonev.com)
Jul 12, 2020
This weekend I decided to play with the new kid on the block - Facebook's Recoil library for managing state.
  • Krasimir Tsonev
Simple state management with Facebook’s new Recoil library (blog.logrocket.com)
Jun 22, 2020
Recoil seems to be the new kid on the state management block — a block that’s considered overcrowded by many. Redux, MobX, Context… the list goes on and on.
  • Ohans Emmanuel
Event-driven state management in React using Storeon (blog.logrocket.com)
Jun 18, 2020
Storeon is a tiny, event-driven React state management library built on the Context API, but with principles similar to Redux — and the same great DevTools.
  • Abdulazeez Abdulazeez Adeshina
The Three Kinds of React State (kyleshevlin.com)
May 29, 2020
No matter what it is you're building with React, when you boil it down, there are only three ways you can manage data 1 in a React app: locally, parentally, and remotely.
  • Kyle Shevlin
How to manage React State with Arrays (robinwieruch.de)
May 17, 2020
This tutorial walks you through the most common scenarios for managing arrays in React state. For each I want to show you a array example in React state, such as how to push an item to an array or how to update an item in an array, when React state is used to store it.
State management with Unstated Next (blog.logrocket.com)
May 01, 2020
Multiple state management libraries have been published to further facilitate state management with the Context API, and in this article, I’ll be looking into Unstated Next.
  • Abdulazeez Abdulazeez Adeshina
How to Use Flux to Manage State in ReactJS - Explained with an Example (freecodecamp.org)
Apr 20, 2020
If you have started working on ReactJS recently then you might be wondering how to manage state in React so that your application can scale.
  • Sharvin Shah
Simplify React state management with Kea (blog.logrocket.com)
Mar 10, 2020
In this article, we’ll look at how to use Kea in a React app as a global state management solution.
  • John Au-Yeung
Using Redux with React: Complete Tutorial with Real-World Examples (taniarascia.com)
Mar 09, 2020
Do you have experience using React? Have you heard of Redux, but you've put off learning it because it looks very complicated and all the guides seem overwhelming? If that's the case, this is the article for you! Contain your fear of containing state and come along with me on this relatively painless journey.
  • Tania Rascia
Stop using isLoading booleans (kentcdodds.com)
Feb 27, 2020
Why using a status enum (or even better: a state machine) will help your app stay bug free.
State Management in Gatsby using the wrapRootElement Hook (alligator.io)
Jan 03, 2020
Since Gatsby handles our routes for us, that leaves us with nowhere to wrap our app with a Redux store or provider. In this article we’ll learn a clever trick to get around that.
  • Joshua Hall
How to Handle Async Actions for Global State With React Hooks and Context (blog.axlight.com)
Dec 20, 2019
I have been developing React Tracked, which is a library for global state with React Hooks and Context.
  • Daishi Kato
Replacing Redux with React Hooks (leighhalliday.com)
Dec 18, 2019
Redux has been the go-to way to manage state within your React application for years. It's popularity is due in large part because when it was introduced, it solved a number of problems which were difficult to do in vanilla React on its own.
How to Handle Async Actions for Global State With React Hooks and Context (newline.co)
Dec 10, 2019
I have been developing React Tracked, which is a library for global state with React Hooks and Context.
  • Daishi Kato
Manage Global State with Context API and Hooks (react.christmas)
Dec 07, 2019
For quite some time, Redux has been React developers go-to library for managing their app’s global state. It’s a great tool – but do you really need it?
  • Jonas Løchsen
MobX with React Native, Simplified (alligator.io)
Dec 07, 2019
State management is the core of any React application and as React is just a UI library, we need something to take care of the state of our app. State management can become troublesome and it is easy to create unmanageable React applications because of inconsistent state.
  • Shad Mirza
Use Hooks + Context, not React + Redux (blog.logrocket.com)
Nov 25, 2019
In this article, I will introduce the React Context API for state management and show you what makes React Hooks plus the Context API a better solution than Redux.
  • Ebenezer Don
React Global State Management with Hooks (itnext.io)
Nov 23, 2019
I was recently working on a Next.js project and wanted a few pieces of global state. I didn’t really want to go through all the setup for redux (nothing against redux, I love redux) so I decided to implement my own simple version of it using hooks.
  • Mark Sauer-Utley
RxJS with React Hooks for state management (blog.logrocket.com)
Nov 11, 2019
In this article, we’ll cover the basics of RxJS and how to integrate it with React applications using React Hooks for state management. We’ll do this by building a demo chat application.
  • Ebenezer Don
MobX and Gatsby (dougwaltman.com)
Oct 17, 2019
I've been moonlighting Gatsby projects in my free time for a couple of years now, while working with Next.js during the day. I've come to love MobX state management with Next, and wanted to bring the goodness to my Gatsby projects. Turns out that it's pretty easy, and I'm going to share the approach I took in a recent project.
  • Doug Waltman
React State (robinwieruch.de)
Oct 14, 2019
In this extensive walkthrough, I want to guide you through all the possibilities of state management in React.
Don't Sync State. Derive It! (kentcdodds.com)
Oct 01, 2019
How to avoid state synchronization bugs and complexity with derived state.
Finite State Machines in React (telerik.com)
Sep 26, 2019
What are Finite State Machines and how can you use them in React to make complicated logic and UIs easier to grasp? In this article we’ll set out to provide an answer to this question by building a video player in React.
State management using only React Hooks (blog.logrocket.com)
Sep 16, 2019
By the end of this article, you should be able to manage your application’s state in a predictable manner without any third-party package.
  • Ovie Okeh
Sharing state like Redux with React's Context API (dev.to)
Sep 15, 2019
In learning React, one of the first challenges I faced was figuring out state management. State is a vital part of any application that has more complexity than a simple blog or brochure site.
  • Rohan Faiyaz Khan
Duplication in State Management: A Story of a Bug (blog.bitsrc.io)
Sep 10, 2019
Why duplication in state management is a recipe for disaster
  • Llorenç Muntaner
Simplifying state management in React apps with batched updates (blog.logrocket.com)
Sep 10, 2019
After making an update to your component’s state using either useState or this.setState, parts of the component re-renders depending on the update.
  • Peter Ekene Eze
State management with React Hooks (freecodecamp.org)
Sep 09, 2019
For this article, we will be working with a pattern for managing state using two very important Hooks, useContext and useReducer, to build a simple music gallery app. The application will have only two views: one for login and the other to list the songs in that gallery.
  • Samuel Omole
State Machines in React (gedd.ski)
Sep 04, 2019
One of the biggest pain points when developing an app is the tricky business of managing state. Many bugs are caused by things getting into unexpected states, or by race conditions. Finite state machines can help eliminate both types of bugs entirely, while providing a welcome, structured way to build components.
  • Dave Geddes
State Management in React Native (sitepoint.com)
Sep 03, 2019
In this tutorial, we’ll learn about what state actually is, and about the setState() method, the Context API and React Hooks. This is the foundation of setting state in React Native.
  • Akshay Kadam
useReducer + useContext for easy global state without libraries (swizec.com)
Aug 12, 2019
Since useAuth is taking off, I wanted to talk about the global state management technique that makes it work. You might find it useful too, or think it’s obvious, I was pretty excited when it clicked.
Using Immer for React State Management (css-tricks.com)
Aug 07, 2019
Since states are not meant to be updated directly (because React’s state has to be immutable), things can get really complicated as states become more complex. They become difficult to understand and follow. This is where Immer comes in and that’s what we’re going to look at in this post.
  • Kingsley Silas
Making impossible states impossible: data structures in React (javascriptplayground.com)
Jul 22, 2019
Today we're talking about avoiding bugs by structuring your data such that the bug can never occur.
Managing State in React using Unstated-Next (css-tricks.com)
Jun 17, 2019
We’re going to specifically look at how to manage state in both single and multiple components using Unstated Next.
  • Kingsley Silas
A state management pattern for Ionic React with React Hooks (ionicframework.com)
Jun 08, 2019
How to manage state in your app can often be the biggest and most impactful architectural decision you make.
  • Max Lynch
Four patterns for global state with React hooks: Context or Redux (blog.axlight.com)
May 27, 2019
Global state or shared state is one of the biggest issues when you start developing a React app. Should we use Redux? Do hooks provide a Redux-like solution? I would like to show four patterns toward using Redux. This is my personal opinion and mainly for new apps.
  • Daishi Kato
How to Redux with React Hooks? (robinwieruch.de)
May 20, 2019
There are several React Hooks that make state management in React Components possible.
Why you should choose useState instead of useReducer (medium.com)
May 15, 2019
A guide to local and global state management via useState.
  • Austin Malerba
Persisting your React state in 9 lines (dev.to)
May 07, 2019
This article will take you through the process of creating a reusable custom hook that persists our state to local storage.
  • Kristofer Selbekk
Application State Management with React (kentcdodds.com)
Apr 22, 2019
How React is all you need to manage your application state.
useReducer vs useState in React (robinwieruch.de)
Apr 17, 2019
There are two main hooks that are used for modern state management in React: useState and useReducer. This tutorial doesn’t explain both React hooks in detail, but explains their different use case scenarios.
React State with Hooks: useReducer, useState, useContext (remysharp.com)
Apr 06, 2019
In this tutorial, we will almost reach the point where these hooks mimic sophisticated state management libraries like Redux for globally managed state. Let’s dive into the application which we will implement together step by step.
The State Reducer Pattern with React Hooks (kentcdodds.com)
Mar 25, 2019
A pattern for you to use in custom hooks to enhance the power and flexibility of your hooks.
A Complete React Redux Tutorial for 2019 (daveceddia.com)
Mar 10, 2019
In this Redux tutorial I’m going to explain how to use Redux with React incrementally – starting with plain React – and a very simple React + Redux example. I’ll explain why each feature is useful (and when you can skip some).
How to simplify state in your React app — Redux with a twist (medium.freecodecamp.org)
Mar 05, 2019
The words “simple” and “Redux” rarely appear together in the same sentence. And yet, much of the React community has come to embrace Redux as one of the best solutions for implementing application state.
  • Arnel Enero
Tough Actin' ReactN (alligator.io)
Feb 16, 2019
Out of the box, React’s state management is limited to a component’s scope or at the very most, a shared state that requires wiring components together. This lack of a global state is why things like Redux and various other packages exist. New on the scene is ReactN which is an extension of React that comes with state management at a global scale baked right in.
  • Josh Sherman
How to use MobX in React Firebase (robinwieruch.de)
Feb 10, 2019
So far, it was fine to rely only on React’s local state and React’s Context API. This tutorial dives into using MobX on top of React and Firebase for the state management.
How to use Redux in React Firebase (robinwieruch.de)
Feb 10, 2019
This tutorial dives into using Redux on top of React and Firebase for state management. You will exchange React’s local state (e.g. users on admin page, messages on home page) and React’s context (e.g. session management for authenticated user) with Redux.
Manage React state without redux (itnext.io)
Feb 10, 2019
How to use React Context API in an easier and prettier way.
  • Lorenzo Spyna
UI as an afterthought (michel.codes)
Feb 05, 2019
A question people ask me regularly: “How do all the new React features (context, hooks, suspense) affect how we build (web) apps in the future? Do they make state management libraries like Redux or MobX obsolete?” With this post, I’ll try to answer that question once and for all!
React Redux Tutorial for Beginners: The Definitive Guide (2019) (valentinog.com)
Dec 24, 2018
The simplest React Redux tutorial I wish I had when I started learning
  • Valentino Gagliardi
Managing Derived State from Props in React (blog.bitsrc.io)
Dec 12, 2018
Patterns and Anti-patterns for managing State based on Props.
  • Ramachandran R
Manage global state with React Hooks (itnext.io)
Dec 03, 2018
Since the announcement of experimental Hooks in React 16.7, they have taken the React community by storm.
  • Charles Stover
State of React State Management for 2019 (blog.bitsrc.io)
Nov 29, 2018
Observing state management in the wild… and the Store is open for business! 🐯
  • Jonathan Saring
XState Version 4 Released (medium.com)
Nov 13, 2018
XState version 4 is a major release with very few breaking changes, and many new features that are fully SCXML-compatible.
  • David Khourshid
No-boilerplate global state management in React (itnext.io)
Oct 30, 2018
When your React application reaches a certain size and scope, attempting to manage state within component instances adds too much complexity, prop drilling, and code smell.
  • Charles Stover
React Global State without Redux (robinwieruch.de)
Oct 02, 2018
A tutorial to showcase how to use React global state without Redux. There are React patterns that can be used to have an application wide state in React without a state management library.
Finite State Machines with React (css-tricks.com)
Jul 24, 2018
Over the last several years, there has been a ton of great innovation in the realm of state management through tools like Redux, MobX, and Vuex. Something that hasn’t gotten quite as much attention, though, is state design.
  • Jon Bellah
Upgrade your React UI with state machines (hackernoon.com)
Jul 05, 2018
This article is about React-Machinery, a library for creating and using state machines in react to control UI.
  • Francis Stokes
How We Ditched Redux for MobX (medium.com)
Jul 02, 2018
Along the road of getting React into our codebase, we stumbled upon the most challenging bits of doing frontend development: state management.
  • Luis Aguilar
When to use Control Props or State Reducers (blog.kentcdodds.com)
Jun 11, 2018
Comparing two similar patterns that enable many of the same use cases.
Managing State in React With Unstated (css-tricks.com)
May 29, 2018
Let's see Unstated in action by creating a simple counter and then look at a more advanced to-do application.
  • Kingsley Silas
The React State Museum (hackernoon.com)
May 07, 2018
View the hottest state management libs for React
  • Gant Laborde
Ditching setState for MobX (medium.com)
May 07, 2018
How to leverage observables, observers, computed properties, autorun & more to supercharge & simplify your React workflow.
A apollo-link-state Tutorial for Local State Management (robinwieruch.de)
May 04, 2018
I want to show how to use apollo-link-state instead of introducing Redux or MobX in a React example application.
Component-based state management for React (jamesknelson.com)
Apr 02, 2018
While React’s component system is great for creating view components, it can’t solve everything. And in particular, it can’t solve state.
Application State Management (blog.kentcdodds.com)
Feb 26, 2018
Some approaches to solving one of the most complex problems in software.
The state reducer pattern (blog.kentcdodds.com)
Feb 19, 2018
A new pattern has been implemented in downshift and it’s awesome. Use the state reducer pattern to make your components more useful.
unstated — The setState of React State Management (medium.com)
Feb 14, 2018
A new paradigm for React state management that is as new as it is old.
When (and when not) to use Redux (blog.logrocket.com)
Jan 19, 2018
In this post, I’m going to discuss Redux, how it’s deeply rooted in the concepts of functional programming, and how to decide if you need it in your application.
Tips to learn React + Redux in 2018 (robinwieruch.de)
Jan 09, 2018
An extensive guide of tips, tricks and resources to learn React.js and Redux in 2018. The tutorial covers various topics in React, JavaScript ES6 and Redux to give you a great start in those topics.
React, Redux and JavaScript Architecture (jrsinclair.com)
Jan 08, 2018
With Redux (like React), understanding why you’d want to use it is much more interesting than how it works.
  • James Sinclair
The future of state management (blog.apollographql.com)
Dec 21, 2017
Managing your local data in Apollo Client with apollo-link-state.
  • Peggy Rayzis
MobX (with Decorators) in create-react-app (robinwieruch.de)
Oct 10, 2017
Everything you need to know about using MobX in a create-react-app with React. The article shows you all the different edge cases on how to activate JavaScript decorators, how to use MobX without decorators, and as bonus how to use MobX in Next.js.
How to manage or eliminate React state without Redux (monicalent.com)
Jul 23, 2017
When I started writing React – I made a big mess. Many of my components took too many props, or my component had an immense amount of state.
  • Monica Lent
8 things to learn in React before using Redux (robinwieruch.de)
Jul 19, 2017
Facts about React that should be known before using Redux (or MobX). Most important: Learn React first, then opt-in Redux but only if you need it. There are various techniques in React.js for scaling your local state management.
Redux or MobX: An attempt to dissolve the Confusion (robinwieruch.de)
Mar 28, 2017
Using Redux or MobX in your React application? The article shows you all the differences between both state management libraries that can be used in React.
Dissecting Twitter’s Redux Store (medium.com)
Feb 10, 2017
I thought it would be fun to dig into Twitter's Redux store, and see how in the hell they organize all them tweets in their state tree.
  • Ryan Johnson
You Might Not Need Redux (medium.com)
Sep 19, 2016
People often choose Redux before they need it. “What if our app doesn’t scale without it?”
MobX React: Refactor your application from Redux to MobX (robinwieruch.de)
Jul 18, 2016
Refactor your React application from Redux to MobX. Use MobX instead of Redux for state management in React JS. Get to know actions, reactions and derivations in MobX and best practices.

Video Guides & Talks

Draggable Divs with Recoil State Management (youtube.com)
Sep 01, 2020
In this video we'll manage a dynamic number of Draggable Boxes (divs) inside of Recoil, computing/deriving a bounding box around these boxes using their positions on the page. We use react-draggable to make the draggable functionality possible.
Introduction to React Recoil (Experimental) State Management (youtube.com)
Jul 30, 2020
In this video we'll learn about Recoil React State Management which is a new and experimental state management library from Facebook. It is great for when your components are highly relational, when you have derived/computed state, and when you want to avoid re-rendering the entire tree when only certain parts of your state have updated.
React Apollo State Management Best Practices (youtube.com)
Jan 23, 2020
I discuss how I like to handle state management when I'm using Apollo and how to use it along side Redux.
Using React Hooks, Context and State (youtube.com)
Dec 13, 2019
Little code along of me trying to figure out how to use local state with context and hooks.
Introduction to MobX & React in 2020 (youtube.com)
Dec 02, 2019
A lot has changed since my first MobX video about 2 years ago. This is an updated version of that, covering hooks and how to use modern MobX with functional components.
XState - Data Loading Service - Finite State Machines in React (youtube.com)
Sep 30, 2019
In this video we'll load data using XState and the help of a finite state machine. We'll keep track of needing to load more data, or if we've already fetched all that is available.
State Management in a World of Hooks (youtube.com)
Jul 03, 2019
In this talk we will explore how we can use the benefits of hooks in state management, such as separation of concerns, declarative side effects, and simple code reuse.
  • Adam Klein
  • Maayan Glikser
State Machines Meet React Hooks (youtube.com)
Jun 28, 2019
Surprised of too many things went wrong in your UI components? Ever felt that freeing your components from bugs is a never-ending endeavour? Familiar with this kind of code in React? Join Zains journey in solving those kinds of issues using State Machines and see how they go in action with React Hooks.
  • Zain Fathoni
Easy Peasy React State Management (youtube.com)
Jun 13, 2019
Easy Peasy simplifies Redux state management and takes away all of that annoying boiler plate. Well take a look at how to get going with it.
MobX The Journey (youtube.com)
May 01, 2019
In this talk I will both reflect on the product and my journey into the Open Source Software world.
Using React Context For Global State (youtube.com)
Apr 23, 2019
Learn how Level Up uses React Context to manage all global state.
Build your own state management in React with Hooks! (youtube.com)
Apr 23, 2019
Did you know you can use only React and hooks to build your own state management solution?! I'll show you how to use Hooks to invent your own state management solution in React.
  • Tanner Linsley
Saving Form State in Local Storage with React (youtube.com)
Mar 15, 2019
I've got a contact form that I need to save to local storage so if people refresh the page and come back it's still around. Let's see how that goes!
Using React.useReducer to avoid state bugs (youtube.com)
Mar 14, 2019
A while back I tweeted an issue I was having with a stopwatch component. I'm going to show you why it was happening and Dan's helpful solution to the problem using React.useReducer (and why React.useState wasn't well suited for this task).
Workout Timer with Mobx (youtube.com)
Feb 23, 2019
Learn how to create a workout timer with Mobx.
Immer, Immutability and the Wonderful World of Proxies (youtube.com)
Nov 15, 2018
Immer is a tiny package that allows you to work with immutable data structures with unprecedented ease. It doesn't require learning new data structures or update APIs, but instead creates a temporarily shadow tree which can be modified using the standard JavaScript APIs. The shadow tree will be used to generate your next immutable state tree. This shadow tree is maintained using Proxies.
State management beyond the libraries (youtube.com)
Nov 02, 2018
Many battles have been fought over what is the best way to do state management. A gazillion of strategies and libraries are out there. So,.. it is time to take one step back. Why is state management relevant in the first place? What problems does it solve? For example, many debates are about mutability or immutability. But then Michel proposed that the more fundamental question to ask is: identities or values? With these concepts in mind, Michel took a look at several libraries and frameworks and recognize the patterns.
Build a simple middleware to always sync state to localstorage (youtube.com)
Aug 01, 2018
Tweaking our main component so that it saves stuff to localstorage was cool and all, but we can do better: A middleware approach that ties into our state library.
Simplest way to save your React state – localstorage (youtube.com)
Jul 31, 2018
Need to preserve some user state across sessions? Here's a quick and dirty way that works really well. Dump the important parts of your data store to localstorage on every change.
The pesky problem of persisting your React state (youtube.com)
Jul 27, 2018
How should you think about persisting your state? What happens when a user refreshes the page? What if they want to come back a year later and continue where they left off?
Why so many React state libraries? (youtube.com)
Jul 25, 2018
We've tried 8 different libraries. There's many more out there. What's the point? Are they really THAT different? Nah. They all do the same things in largely the same ways. Pick the one that strikes your fancy best.
Constate might be the best state library yet (youtube.com)
Jul 24, 2018
Constate, what a neat little state management library. Code compact, state immutable, everything neatly organized. Love it
Cerebral.js is cool but I'm too dumb? (youtube.com)
Jul 21, 2018
Cerebral.js state management library ... it's like Redux with less boilerplate and more magic but still a lot of boilerplate and confusing conventions.
  • Swizec Teller
Govern is components for your state (youtube.com)
Jul 20, 2018
A conceptually fascinating library, Govern gives you state management built from React-like components that return state objects instead of JSX.
Bey is like Unstated, Redux, and Immer had a baby and it's great (youtube.com)
Jul 19, 2018
Bey is a new state management library that takes the best concepts from many worlds. Really cool
How XState helps you think (youtube.com)
Jul 17, 2018
David K. Piano's XState is a brilliant idea: A library that helps you reason about your state as actual finite state machines AND EVEN DRAWS THEM OUT.
Unstated state lib (youtube.com)
Jul 16, 2018
Unstated, state so simple it goes without saying. It really does. This might be the simplest easiest to grok solution I've ever seen.
How mobx-state-tree makes mobx scale (youtube.com)
Jul 13, 2018
mobx-state-tree is amazin!. Fixes just about every I ever hadwith building large scale MobX apps.
MobX & Redux side by side (youtube.com)
Jul 12, 2018
Same app, 2 state management libs. Redux is super explicit, MobX fits in one file.
How MobX works and the mental model you should use (youtube.com)
Jul 10, 2018
You know how to use MobX, but do you have a good mental model for how it works? Perhaps it feels like magic?
How to MobX in a nutshell (youtube.com)
Jul 09, 2018
Learn the basics of using MobX and build a silly example to see how it works.
What makes MobX so wonderful? (youtube.com)
Jul 06, 2018
MobX is wonderful. My first love when it comes to React state management.
How Redux thunks make your life easier (youtube.com)
Jul 03, 2018
Redux with its actions and reducers and elegant store is great. But what makes it really shine are thunks. Thunks are great.
What does Redux actually _do_? (youtube.com)
Jul 02, 2018
So what does Redux actually _do_ when you do your reducers and your actions and connect things to the store?
Redux in 2 minutes (youtube.com)
Jul 01, 2018
So you know WHY you'd wanna use Redux and when. But how?
How Redux makes your code more refactorable (youtube.com)
Jun 30, 2018
You've heard of Redux haven't you? It's great and everyone's using it. But why? When? Does it always make sense to reach for Redux?
Your redux mobx or vuex store is a mess. But why? (youtube.com)
Jun 29, 2018
Your redux or mobx or vuex store is a mess. There's too much stuff in there. So what went wrong?
What goes in your global state, anyway? (youtube.com)
Jun 28, 2018
Your redux or mobx or vuex store is a mess. There's too much stuff in there. So what went wrong?
Your state as a state machine (youtube.com)
Jun 27, 2018
Your state is a state machine. That helps you think about it. Values are circles, actions are arrows.
Why state management matters (youtube.com)
Jun 26, 2018
Learn all about state management in modern webapps.
State Management in React Apps with Apollo Client (youtube.com)
May 25, 2018
Apollo has given us freedom and happiness when it comes to managing our data coming from the server but we still had to write code and sometimes a lot of it to manage our local state? Well, what if we managed it with queries too? Sounds too awesome right? Let's learn how to do this with apollo-link-state.
Making Unreasonable States Impossible (youtube.com)
May 25, 2018
Based on @nikgraf's introduction to Reason (Get started with Reason), this talk goes deeper into the world of variant types and pattern matching and puts them into a practical context. You will learn how these tools help you design solid APIs, which are impossible to misuse by consumers. Additionally you will get more insights into practical ReasonReact code.
  • Patrick Stapfer
React State Management In a GraphQL Era - Kitze (youtube.com)
Apr 25, 2018
Now that GraphQL takes care of managing data in our apps, is an external state-management library even needed? Let's explore all the possibilities and compare the combinations of React, Apollo, Redux, MobX, and Next.js.
  • Kitze
There and back again: grokking state and data (youtube.com)
Apr 18, 2018
Many teams have been discussing on whether to go the immutable or mutable state route. Flux or MVC or MVVM? Redux, MobX or Apollo? Instead of answering the question, in this talk we will look at JavaScript code on a more fundamental level: How do data structures work in JavaScript. What assumptions can be we make if we treat them to be immutable? Or mutable? How can we express concepts like identities, references, collections, mutations, derivations in either case? And can we bent the rules between the two? This talk will provide you a deeper understanding of the difference between state and data.
The Fundamentals of Redux (youtube.com)
Mar 31, 2018
Redux is the most widely-used state management library for React applications, and has spread throughout the Javascript ecosystem. However, the learning curve can be steep for many people. Come join Redux co-maintainer Mark Erikson as we talk about the core concepts of Redux, how to use Redux with React, and how Redux was designed to make Javascript applications predictable.
  • Mark Erikson
Easy MobX and Redux Comparison (youtube.com)
Mar 24, 2018
We take an app from component state to MobX, then the same app from component state to Redux and talk about the differences. Async code in both MobX and Redux is covered!
MobX vs Redux vs setState: my two cents (youtube.com)
Mar 22, 2018
In this video, I would like to address what is by far, the most asked question on Sketch Elements: Why do you use MobX? I'm excited to give my take but also to hear your thoughts on that topic.
State Management in a GraphQL Era (youtube.com)
Mar 20, 2018
We're going to start with exploring the evolution of making a SPA. Then we're going to dive into the problem of how fetching, caching, and reading data really complicates state-management and see what approaches we took with different libraries and frameworks like jQuery, Angular, and React.
  • Kitze
Redux Crash Course With React (youtube.com)
Mar 17, 2018
In this video we will talk about what Redux is and build a React app from scratch and add all of the boilerplate for Redux and work with the store/state, actions, reducers and all of the other fundamentals of the Redux state manager.
Introduction to MobX State Tree (youtube.com)
Feb 17, 2018
Here we look at how MobX State Tree works and how it compares to MobX.
Michel Weststrate: React, But For Data (youtube.com)
Oct 02, 2017
React and its component model is nowadays the most appealing abstraction to declaratively describe user interfaces. The core concepts are so powerful that we can apply them outside the DOM, like in React-VR, Sound manipulation, games etc. In this talk I will demonstrate that all the core ideas powering React are so powerful that we can even translate them to a completely different field: state management. MobX-state-tree applies these very same concepts to make data management declarative, elegant and easy to reason about.
Next generation state management (youtube.com)
May 23, 2017
Last years there have been great developments in state management libraries. Both Redux and MobX sprung from the React community and provide stand-alone, generic state management solutions. Both have gained big in popularity, and both have their own strengths and weaknesses. What can we learn from both approaches?
Complexity: Divide and Conquer! (youtube.com)
May 07, 2017
"Reactive programming" still sounds scary to many developers. As if it is an elevated way of thinking, only accessible to the chosen few. Nothing is less true! It is the most natural way to look at programming problems. You just might not realize it yet! In this talk, Michel will demonstrate that many complex UI problems, such as form validation and routing, can all be seen as '*actions* that change *facts* which leads to *reactions*'. And as soon as we start distinguishing those concepts in our applications; our code will become more declarative, more concise and less imperative.
MobX: The Quest For Immer Mutable State Management (youtube.com)
Nov 07, 2016
At React Amsterdam, you can meet its full-stack lead developer Michel who strongly believes in pragmatic, agile and the-simplest-thing-that-could-possibly-work programming.
Real World MobX (youtube.com)
Oct 03, 2016
At Mendix we use MobX to manage the state of our visual enterprise application studio. In this talk we will take a look behind the scenes and see how MobX simplifies concerns like authentication, data fetching and routing. The strong decoupling of state and UI helps us to iterate on our UI more quickly. The architecture of the studio is pluggable and we will see how MobX helps integrating external producers and consumers of state into the product. In the end, we believe that this approach results in a code base that is sane and accessible. In which we get things done quickly.
State Management is Easy (youtube.com)
May 26, 2016
State is the heart of each application and there is no quicker way to create buggy, unmanageable applications then by producing inconsistent state. Hence many state management solutions try to restrict the ways in which you can modify state, for example by making state immutable. But this introduces new problems; data needs to be normalised, referential integrity can no longer be guaranteed and it becomes next to impossible to use powerful concepts like prototypes.

Books & Guides

Real-world Redux (blog.jakoblind.no)
Aug 30, 2018
This is a single resource that teaches you everything you need to know to build real applications with Redux.
MobX Quick Start Guide (packtpub.com)Get it on Amazon
Jul 26, 2018
Apply functional Reactive programming for simple and scalable state management with MobX
Understanding Redux (thereduxjsbooks.com)
Jun 01, 2018
The World’s Easiest Guide to Beginning Redux
  • Ohans Emmanuel
The Complete Redux Book, 2nd edition (leanpub.com)
Apr 19, 2018
Everything you need to build real projects with Redux
  • Ilya Gelman
  • Boris Dinkevich
Human Redux (reduxbook.com)
Apr 16, 2018
Practical patterns for the hardest problems in JavaScript apps: containing complexity as requirements shift and managing application state.
  • Henrik Joreteg
Taming the State in React (roadtoreact.com)
Sep 26, 2017
Learn about local state in React and state management with Redux and MobX from scratch.
Learning Redux (packtpub.com)Get it on Amazon
Aug 31, 2017
Build consistent web apps with Redux by easily centralizing the state of your application
  • Daniel Bugl

Courses & Video Series

React Tracked: Creating Web Apps with Global State (educative.io)
Apr 21, 2020
In this course, you will create a to-do app. But before diving into creating an application, you’ll first learn how React Tracked can solve common performance issues around render optimization. Once you learn how to work with this library, you’ll then build a to-do app through two different methods.
  • Daishi Kato
State Management with Redux & MobX (frontendmasters.com)
Jul 23, 2019
In this course, you’ll learn best practices for structuring your data and how to keep your application fast and nimble as your codebase grows. You’ll get your hands on multiple solutions for managing state in large React applications including Redux, Redux Thunk, Redux Observables and MobX.
Pure Redux (daveceddia.com)
Mar 19, 2019
You can be productive with Redux and React, and this video course will help you do it. You’ll get hands-on practice by building an app in React, and then refactoring it to use Redux. That’ll give you the basics.
Apollo Client State with React (lynda.com)
Jan 15, 2019
Discover how to manage client-side state using Apollo with React. Learn how to configure and query client state, mutate client state, mutate the cache, and more.
  • Eric Greene
Develop React Applications with Mobx and TypeScript (egghead.io)
Jan 09, 2019
In this course, you’ll see how to model your React application logic using simple JavaScript classes — and with the help of MobX, make those classes the beating heart of your React applications.
  • Basarat Ali Syed
The Complete React Js and Redux Course - Build Modern Web Apps (packtpub.com)
Nov 16, 2018
Go from beginner to React.js expert by building an Instagram-like web app with React 16, React Router, Redux, and Firebase!
  • Rayan Slim
  • Rob Percival
Learn While You Poop: State (youtube.com)
Jun 25, 2018
Learn all about state management in modern webapps
Advanced React and Redux (udemy.com)
May 30, 2018
Detailed walkthroughs on advanced React and Redux concepts - Authentication, Testing, Middlewares, HOC's, and Deployment.
  • Stephen Grider
Manage React Form State with redux-form (egghead.io)
May 08, 2018
In this course, we are going to use the redux-form package to create a form whose state is easy and enjoyable to manage
  • Rory Smith
Advanced React Patterns (frontendmasters.com)
May 02, 2018
In this course, Kent C. Dodds shows how to separate component logic, state and display properties to make your components more flexible and usable across large React applications.
Modern React with Redux (udemy.com)
Apr 30, 2018
Master the fundamentals of React v16.3.2 and Redux as you develop apps with React Router, Webpack, and ES6.
  • Stephen Grider
Redux Fundamentals (pluralsight.com)
Jan 17, 2018
In this course, you'll learn how to quickly reap the benefits of Redux for any web app, wether you use React or not.
  • Jamis Charles
Manage Application State with Mobx-state-tree (egghead.io)
Jan 08, 2018
In this course, Michel Westrate - Creator of Mobx - will teach us how to model application state after your problem domain with Mobx-state-tree (MST)
Redux & React For Everyone (leveluptutorials.com)
Dec 29, 2017
Learn Redux with React with 21 practical, easy to follow videos & code
Advanced State Management in React (feat. Redux and MobX) (frontendmasters.com)
Dec 04, 2017
This course will take you on a tour through the most popular state management approaches and libraries, and is designed for developers with a working knowledge of React who want a solid understanding of the various ways to manage state in large React applications.
Up and Running with redux-observable (egghead.io)
Oct 06, 2017
Through small, focussed lessons we’ll learn how to setup a React project that uses Redux for state management and redux-observable for asynchronous actions.
  • Shane Osbourne
Redux Saga (pluralsight.com)
Aug 20, 2017
In this course, you'll learn about Redux Saga, ES6, testing, effects, and channels
Build A React App With Redux (egghead.io)
Aug 14, 2017
In this course you will learn how to build a production quality React application using Redux.
  • Andy Van Slaars
Advanced Redux (pluralsight.com)
Jun 01, 2017
This course will teach you advanced Redux techniques, including using sagas, using selectors, creating React components, and creating middleware.
Mastering Flux and Redux (pluralsight.com)
Feb 23, 2017
Redux is one of the most popular JavaScript libraries of all time, according to GitHub, and it's all based on Flux. This course will teach you all levels of Flux and Redux implementation.
Learning Redux (lynda.com)
Dec 23, 2016
Explore Redux, the JavaScript library for managing client data, and learn how to build a data layer for an interface made of React components.
  • Alex Banks
Manage Complex State in React Apps with MobX (egghead.io)
Aug 01, 2016
MobX is designed to enable building web applications with a complex data model in an intuitive and very performant manner.
Learn Redux (learnredux.com)
Jun 10, 2016
A 20 video / 2.5 hour course to learn how to use Redux, React Router and React together.
Building React Applications with Idiomatic Redux (egghead.io)
Jun 02, 2016
Even if you have already spent time studying Redux, this course will show you better practices straight from the library's creator Dan Abramov.
Getting Started with Redux (egghead.io)
Nov 23, 2015
In this series, we will learn the basics of Redux, so that you can start using it to simplify your applications.

Podcast Episodes

Michael Chan Encapsulates State (kentcdodds.com)
May 19, 2020
Michael Chan talks about co-location, encapsulation, and CSS grid.
Tanner Linsley Separates UI State And Server State (kentcdodds.com)
May 19, 2020
Tanner Linsley talks about creating libraries and separating UI state and server state.
State In React (syntax.fm)
Aug 14, 2019
In this episode of Syntax, Scott and Wes talk about state in React: local state, global state, UI state, data state, caching, API data and more!
React Hooks for Global State and More Custom Hooks with Daishi Kato (devchat.tv)
Jul 30, 2019
Daishi talks about his definition of global state, how it differs from a regular state, and why it is a problem with the current context implementation.
The State Machines in React with David Khourshid (devchat.tv)
Jul 09, 2019
The panel discusses what a state is in React. David defines a state as a moment in time. States can change, when they do, that’s a state transition. They talk about the utility of states and thinking about your app as a state machine.
Michel Westrate Wants You To Stop Writing State Reducers (reactpodcast.com)
Jun 20, 2019
We talk with Michel about this wild of idea of state producers (not reducers) in Immer, why they're in the spirit of React, his MobX fame, and why — even in 2019 — it's not a good idea to roll your own state management library.
React State Museum (devchat.tv)
Sep 25, 2018
In this episode, the panel talks with Gant who has been programming for twenty years. In the past, he has been an adjunct professor and loves to teach. Finally, he talks at conferences and enjoys sharing his ideas. The panel talks about the React State Museum, among many other topics, such as: React Native, Flux, Redux, Agile, and XState.
  • Charles Max Wood
  • Lucas Reis
  • Justin Bennett
  • Gant Laborde
Working with State Machines (shoptalkshow.com)
Sep 03, 2018
We're joined by Jon Bellah and David Khourshid to talk about what a state machine is and what's not a state machine. We talk about state machines in React, login forms, going into the wrong state, fallbacks, game development, and working state machines into existing projects.
  • Dave Rupert
  • Chris Coyier
  • Jon Bellah
  • David Khourshid
Immer & MobX State Tree feat. Michel Weststrate (devchat.tv)
Mar 29, 2018
In today’s show, the React Native Radio Host, Nader Dabit and Spencer Carli speak with Michel Weststrate about Immer and MobX state tree. Both libraries are written by Michel. Michel does open source and tech leads about Mendix. Mendix is an enterprise software vender that Michel works for currently. Michel and React Native Radio discuss MobX State Tree and Immer libraries, and other areas of Mendix.
Dan Abramov, co-author of Redux (egghead.io)
Dec 22, 2017
Joel Hooks co-founder of egghead.io, interviews Dan Abramov, co-author of Redux. They discuss the "Redux phenomenon" and the notion of improving the developer experience.

Libraries

immer (github.com)9880
v3.2.0
Aug 02, 2019
Create the next immutable state by mutating the current one.
easy-peasy (github.com)1297
v3.0.1
Aug 01, 2019
Easy peasy global state for React.
  • Sean Matheson
redux (redux.js.org)47488
v4.0.4
Jul 11, 2019
Predictable state container for JavaScript apps.
react-redux (react-redux.js.org)15716
v7.1.0
Jun 11, 2019
Official React bindings for Redux
undux (undux.org)1211
v5.0.0-beta.22
Apr 25, 2019
Dead simple state management for React.
  • Boris Cherny
react-use-database (github.com)24
v1.0.1
Feb 19, 2019
react-use-database gives you an opinionated interface, efficient data flow, and concise global state management.
  • Austin Malerba
reworm (github.com)1392
v2.2.1
Nov 15, 2018
The simplest way to manage state.
  • Pedro Nauck
react-copy-write (github.com)1725
v0.8.0
Aug 12, 2018
An immutable React state management library with a simple mutable API, memoized selectors, and structural sharing.
  • Brandon Dail
unstated (unstated.io)6226
v2.1.1
May 25, 2018
State so simple, it goes without saying
  • Jamie Kyle