Atomic State Management in React

submited by
Style Pass
2022-01-12 20:30:07

Well, it depends. React developers usually use two approaches to organize application state, component state (useState) and global store (Redux). Accordingly, the state can live in relation with component or in Redux store, to be short, it is tightly coupled with the originator and cannot be created independently.

Atomic State Management implies using Atoms as a single source of the state. It’s like useState that can be shared between components. It took advantages from both component state and global store patterns into one approach.

As you can see there is no need to have a huge boilerplate code to have a globally accessible state. You are free to define the state wherever you want, global level, near the component or module level, it depends on your architecture and taste.

There are two most popular libraries that implement atomic state management patterns, Recoil (coordinated by Facebook) and Jotai, and they already have implemented selectors, async setters, devtools integrations, time-traveling, etc.

Leave a Comment