Keep Calm and Recoil: State Management Without the Drama

What is Recoil?

Let’s imagine our React as a group of people (components) working together. Each person has their own notes(state) - but what if some notes are to be shared?

It gets messy in the react, we pass up and down the components(through props), we shout to the other component(Context), or we create a giant whiteboard(redux) that is hard to manage.

Recoil is like giving everyone access to a shared set of sticky notes — where they can read and write instantly. No shouting, no confusion.

Why recoil?

Here’s why recoil is simple and powerful.

• Global state without complexity: Like useState but works across entire app.

• Fast and Reactive: If something changes, only the components that care about it update.

• No Boilerplate: You don’t need actions, reducers, or crazy setup.

• Great for Beginners: If you know React hooks, Recoil feels natural.

Key Concepts

1. Atoms:

   Think of Atoms like shared notes

   If one component changes the value any other component re-renders reflecting the change.

2. Selectors

   Want to do calculations or transformations? Use a selector.

   Like a formula that auto-updates when input changes.

3. useRecoilState / useRecoilValue / useSetRecoilState

   Hooks to read, update, or only write to atoms or selectors.

Final Thoughts

One more thing that Recoil optimizes is re-renders, basically: any component using a value(state), a component updating the value(setState), a component sharing the state(props) and the main component where the state is declared(useState). These all component re-render whenever the value (state) is changed. So, these unwanted re-renders cause performance degradation.

Recoil in this place only renders the components using the value(state).

So, it is a powerful tool to optimize re-renders and manage state effectively.