How to use Recoiljs in Next.js Framework.


Recoil: An Experimental State Management Library for React

Interesting not only because it comes from Facebook, but because there’s a pretty good 20-minute talk about it and it follows the latest React standards out of the box.


A state management library for React

Minimal and Reactish

Recoil works and thinks like to React. Add some to your app and get a fast and flexible shared state.

Data-Flow Graph

Derived data and asynchronous queries are tamed with pure functions and efficient subscriptions.

Cross-App Observation

Implement persistence, routing, time-travel debugging, or undo by observing all state changes across your app, without impairing code-splitting.

The first step is, you have to install the recoiljs library via npm or yarn

npm i recoil

// Or if you're using yarn

yarn add recoil

Then open the _app.js file from /pages folder and import the library and setup like below

import { RecoilRoot } from "recoil";

const MyApp = ({ Component, pageProps }) => {
  return (
      <Component {...pageProps} />

export default MyApp;

Then create a helper file on any of your directory, the recoil helper file like below

import { atom, selector } from 'recoil'

export const countState = atom({
  key: 'count',
  default: 0,

export const incrementCount = selector({
  key: 'incrementCount',
  set: ({ set }) => set(countState, (currCount) => currCount + 1),

export const decrementCount = selector({
  key: 'decrementCount',
  set: ({ set }) => set(countState, (currCount) => currCount - 1),

Then in the component write codes staff like below

import { useRecoilValue, useSetRecoilState, useResetRecoilState } from 'recoil'
import { countState, incrementCount, decrementCount } from '../recoil-helper'

const useCounter = () => ({
  count: useRecoilValue(countState),
  increment: useSetRecoilState(incrementCount),
  decrement: useSetRecoilState(decrementCount),
  reset: useResetRecoilState(countState),

const Counter = () => {
  const { count, increment, decrement, reset } = useCounter()
  return (
        Count: <span>{count}</span>
      <button onClick={increment}>+1</button>
      <button onClick={decrement}>-1</button>
      <button onClick={reset}>Reset</button>

export default Counter

And that’s it 🙂

There are many ways to implement that but make sure you are understanding the main concept of the recoiljs.

The project repository you will find here

Happy coding 🙂

Exit mobile version