Managing states with Recoil in React application
Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone while being compatible with the newest features of React.
While working with react you might have noticed that are different ways to manage the global state management in React. Let’s take look at the options that we have:
It is used by a lot of web apps these days, it allows us to have a global state, register components to it and they will re-render by themselves every time a value they registered to will change.
- Redux helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.
- Centralizing your application’s state and logic enables powerful capabilities like undo/redo, state persistence, and much more.
- Redux works with any UI layer and has a large ecosystem of add-ons to fit your needs.
Context API is another approach that devs take for better management of state within the application.
Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language.
- Scalable from any range of application (small, mid, large)
- Comparatively less complex than Redux
- No need to pass data to the children at each level. Consumer component instance can access all the data provided by the Provider Component at any level.
Now that we are already using to above two famous ways of adding global state to our application here comes something new i.e Recoil.
Recoil lets you create a data-flow graph that flows from atoms (shared state) through selectors (pure functions) and down into your React components.
- Atoms are units of the state that components can subscribe to. They’re updateable and subscribable: when an atom is updated, each subscribed component is re-rendered with the new value. They can be created at runtime, too. Atoms can be used in place of the
Reactlocal component state. If the same atom is used from multiple components, all those components share their state.
- Selectors transform this state either synchronously or asynchronously. When these upstream atoms or selectors are updated, the selector function will be re-evaluated. Components can subscribe to selectors just like atoms, and will then be re-rendered when the selectors change.
Let’s try to understand this with a Demo example.
Consider we want to store user data upon login into our application and share between two components, and
Let first define an atom which stores the logged-in user Data
In the above example, we have stored the object which has a name in it. It is stored inside our
Now consider we need to show this name in our
And our component looks something like this, which display the data from the same atom which is used in the header component again with help of useRecoilState
The syntax might look quite similar to useState which we are already used to in
As in the above example since the same state is shared between the
component and the if you change the name of logged-in user from the component, then it will change it globally performing or necessary re-renders to update the state.
This is one of the important hooks in the Recoil API. This hook will just subscribe to the component to the given Recoil state, it is used to return the value of the given Recoil state.
For more information and to develop web application using React JS, Hire React Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – email@example.com or Skype us: “hkinfosoft”. To develop custom web apps using React JS, please visit our technology page.