Read on Twitter
History of React State Management
• 2013 – Introduction
• 2015 – Redux
• 2016 – MobX
• 2018 – Context
• 2019 – Hooks
• 2019 – Zustand
• 2020 – Jotai, Recoil
• 2021 – useSelectedContext
The future is exciting! Here's a brief summary of how we got here
• 2013 – Introduction
• 2015 – Redux
• 2016 – MobX
• 2018 – Context
• 2019 – Hooks
• 2019 – Zustand
• 2020 – Jotai, Recoil
• 2021 – useSelectedContext
The future is exciting! Here's a brief summary of how we got here
React's component model helped create reusable, composable applications. Each component had its own local state.
As web apps became more complex, new solutions emerged to more easily share logic between components.
As web apps became more complex, new solutions emerged to more easily share logic between components.
Redux quickly grew to the most popular state management solution. It's ecosystem of tools and libraries encapsulated both UI state and server caching state.
It's still extremely popular and widely used.
https://redux-toolkit.js.org/
It's still extremely popular and widely used.
https://redux-toolkit.js.org/
React Context gave us a first-party solution to share logic between components. This solved UI state for many cases.
React Hooks made Context simple to use (`useContext`). It also allowed libraries like SWR and React Query to solve server caching state.
https://swr.vercel.app/
React Hooks made Context simple to use (`useContext`). It also allowed libraries like SWR and React Query to solve server caching state.
https://swr.vercel.app/
In the past few years, we've also seen Zustand, Jotai, and Recoil emerge.
They aim to solve common performance issues from state management at scale (and for specific types of apps).
There's a lot more here, so I'll defer to the experts @pmndrs.
They aim to solve common performance issues from state management at scale (and for specific types of apps).
There's a lot more here, so I'll defer to the experts @pmndrs.
2021 will introduce the`useSelectedContext` hook (eventually).
This is a first-party solution for the previously mentioned performance issues. https://github.com/facebook/react/pull/20646
This is a first-party solution for the previously mentioned performance issues. https://github.com/facebook/react/pull/20646
In the future, React will automatically figure out which components to re-render ("auto-memoization") 
Big thanks to the @reactjs team, as well as all the library authors and contributors above!
Big thanks to the @reactjs team, as well as all the library authors and contributors above!
