What is Atomic State Management in React?

Thank you for taking the time to read this article. On this occasion I will explain about Atomic State Management in React. Maybe some of you have heard about Atomic state management in React but are still wondering what Atomic really is. Before I explain what Atomic is, let’s answer the following questions together.

Where does the state live?

The solution isn’t simple. React developers usually manage application state in two ways: local state (within components using useState) or shared state (using a global store like Redux, Zustand, React Query, etc.). State can be either encapsulated within a specific component or centralized in the Redux store, meaning it's inherently connected to its origin and not self-contained.

Have you ever encountered a scenario where you wanted to leverage the useState hook while simultaneously sharing a reference to your state object? This is where the atomic state management pattern shines.

Atomic

Atomic State Management employs Atoms as the primary source of truth for your application state. Think of it as an enhanced useState hook that facilitates seamless state sharing across components. This approach cleverly marries the strengths of both component-level and global state management patterns.

Atoms are designed to encapsulate a single value, making them concise and easy to share among components. The following example illustrates this concept:

// this example is using jotai: https://jotai.org/

import { Provider, atom, useAtom } from 'jotai'
const atom1 = atom(0)
const atom2 = atom(0)
// Optional: you can use Provider's just like useContext,
// ...but if you only need one,
// ...you can just omit it and Jotai will use a default one (called Provider-less mode).
const Parent = ({ children }) => {
  return <Provider>{children}</Provider>
}
const Component1 = () => {
  const [state, setState] = useAtom(atom1)
}
const Component2 = () => {
  const [state, setState] = useAtom(atom2)
}

As demonstrated, Atomic State Management eliminates the need for extensive boilerplate code to achieve global state accessibility. You have the flexibility to define your state wherever it makes the most sense within your architecture, whether at the global level, near a component, or within a module. This approach significantly reduces complexity compared to patterns like Flux, while maintaining the familiar simplicity of React useState hook.

Use atomic state management techniques to achieve better flexibility in organizing application state management.

Libraries

There is a lot of state management using the atomic concept, but there are 2 libraries that are currently very popular for use by frontend developers to develop their projects, namely Recoil and Jotai. These two libraries are currently still being developed, which is still very relevant to use if you want to use them. Apart from that, these two libraries have implemented selectors, async setters, devtools integrations, time-traveling, etc.

Conclusion

In conclusion, Atomic State Management in React presents a powerful and flexible approach to managing application state. By leveraging Atoms as a central source of truth, developers can seamlessly share state between components while enjoying the benefits of both local and global state management patterns. This paradigm shift simplifies state management, reduces boilerplate code, and enhances the overall developer experience. While Recoil and Jotai are currently popular choices for implementing Atomic State Management, the landscape is constantly evolving, offering developers exciting opportunities to explore and refine their state management strategies.

I hope that this article can be useful for you and your team and make your knowledge even wider!

Thank you and see you in other articles.