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.

Recoil

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 (
    <RecoilRoot>
      <Component {...pageProps} />
    </RecoilRoot>
  );
};

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 (
    <div>
      <h1>
        Count: <span>{count}</span>
      </h1>
      <button onClick={increment}>+1</button>
      <button onClick={decrement}>-1</button>
      <button onClick={reset}>Reset</button>
    </div>
  )
}

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 🙂