The word "Recoil" describes an unexpected outcome of an action or a reactive effect to an action. The recoil of a gun is used to name the backward pull that occurs firing a bullet which is a reactive effect. In addition, it is used to address the sudden reactions of a person as 'He recoiled in fear'.
In RecoilJs, the unexpected behavior (recoil) of a react app is controlled. Here it is referred to the unwanted re-renders of the components which consumes a lot of processing power and make the app less smooth in functioning. On the other hand, the two main core concepts, shared state and derived state can be used to manage the state very easily without making the code more complicated.
Atom
In recoilJS, state is addressed by dividing it to pieces. An atom is one of those pieces. It will be subscribed by components and as well as selectors and whenever an atom changes its state that component will re-render and the selectors will re-run.
Selector
Selector acts similar to an atom as the return value is the same type as an atom (RecoilState). But that value is derived using an atom. When that atom changes its state the selector also returns its updated derived recoil state.
AtomFamily
AtomFamily is used to get an atom in dynamic instances. This is very helpful to make the app more scalable. Unlike atoms or selectors, atomFamily holds a function to return an atom.
State Management in Recoil
Each component in an app has a State which will hold the data that need to be displayed or control the user interactions.
Sometimes these states may have common components (shared state) or some components use a derived state of another component (derived state). Recoil is designed to easily handle these 2 instances with atoms and selectors. Atoms will hold the state while the selectors will create the derived state from an atom. Selector is also a type of atom; it returns the derived state of an atom.
Redux and Context state management libraries also support these instances. But when a piece of a state of a component is changed in these systems, all the subcomponents of the component are re rendered regardless of the dependency of that piece of state to the subcomponent.
In Recoil, that action of re-rendering all the components is hindered as it considers the state as a set of small states and the sub components or components are made to subscribe to a small state (atom). In this way the component or the sub component re-renders only when that piece of state is changed. RecoilJS is very useful in such complex applications where the UI has many components that do not necessarily need re-rendering as another component is rendered.
Conclusion
Overall, Recoil is one of the best libraries to easily handle the state management of a complex app. If the app has a high scalability need in performance you may need to start from Recoil otherwise the previous state managements are better to be used.
Recoil is a library whereas you can use it to perform many interactions with the state while having control with the react rendering process.
For more insights on Recoil check the following link: recoiljs.org
