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 global 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.
Top comments (2)
What you've stated in your opening paragraph isn't entirely true - React has had state management included from the beginning, most recently accessed using the useState hook, but this defines state at a component level and so state must be passed manually between parent and child components in order to be shared. What you're talking about specifically is GLOBAL state management.
Great article @agboolaidris.
More indepth on usecase-scenarios will actually go a long way for begginer and intermediate in Truly Unserstanding React