Best way to Manage State in React Project in 2022

When talking about front-end development in 2022, React is one of the most popular and use technology in the industry and React does not come with its own state management tool until recently. React team added a new state management API, called Context API which has a lot of limitations. In this article I will share with you best way to manage state in your next React project.

Recoil

Recoil is an open-source state management library with more than 14k stars on Github, it was invented by Dave McCabe, a Software Engineer at Facebook. It provides a global state so all components in a React application can share states easily and it is minimal compared to Redux with no boilerplate code setup needed.

Redux

Redux is a predictable state container designed to help you write JavaScript apps that behave consistently across client, server, and native environments and are easy to test with more than 57.7k stars on Github.

Mobx

MobX, a simple, scalable, and standalone state management library, follows functional reactive programming (FRP) implementation and prevents inconsistent state by ensuring that all derivations are performed automatically.

Flux

Flux is the application architecture that Facebook uses for building client-side web applications, it is more of a pattern than a framework, and does not have any hard dependencies. However, we often use EventEmitter as a basis for Stores and React for our Views. The one piece of Flux not readily available elsewhere is the Dispatcher. This module, along with some other utilities, is available here to complete your Flux toolbox.

useContext

useContext is a React hook that provides a way to pass data through the component tree without manually passing props down through each nested component.