Build your own Recoil

TLDR; A working example is available in codesandbox.

Recoil is a new experimental state management library for React provided by Facebook. The core concept of it is Atoms and Selectors:

Atom

Atom is a unit of state. An example of it can be some text state that represents user's input:

const textState = atom({
  key: 'textState',
  default: '',
});

With the help of useRecoilValue or useRecoilState hooks it is possible to use atoms in a React component:

function TextInput() {
  const [text, setText] = useRecoilState(textState);
  const onChange = (event) => {
    setText(event.target.value);
  };

  return <input type="text" value={text} onChange={onChange} />;
}

Selector

Selector is a pure function that accepts atoms and represents a piece of derived state:

const charCountState = selector({
  key: 'charCountState',
  get: ({get}) => {
    const text = get(textState);

    return text.length;
  },
});

Same as for atom useRecoilValue or useRecoilState hooks have to be used:

function CharacterCount() {
  const count = useRecoilValue(charCountState);

  return <>Character Count: {count}</>;
}

Recoil is getting more and more popular and today it has more than 13k stars.

That makes it promising for use in projects. The only downside is that the recoil project is still experimental. And it can give some risks in future.

From the other side, you might be used to another state management. It can be Redux, RxJS, MobX, events from Leaflet and so on. So can you stay with it and make the project ready for migration to recoil? Or can you have a plan B for a case if Recoil will not be released? The answer to both questions is yes and let's check how to do it on top of MobX.

MobX

MobX is a simple, scalable and tested state management solution with it's own concept:

Make sure that everything that can be derived from the application state, will be derived. Automatically.

The library has more than 24k stars and has only 5 opened issues that indicates it's really good stability.

To implement textState with MobX the only thing you need is to use class and make it reactive:

class TextState = {
  text = "";

  constructor() {
    constructor() {
      makeAutoObservable(this);
    }
  }

  setText(nextText) {
    this.text = nextText;
  }
}

After that it is possible to use it in any React component:

const textState = new TextStat();
function TextInput() {
  const {text, setText} = textState;
  const onChange = (event) => {
    setText(event.target.value);
  };

  return <input type="text" value={text} onChange={onChange} />;
}

The downside of that solution might be the fact that you need to introduce a new dependency mobx-react and use observer, so that component will react to changes.

To solve the issues mentioned above it is possible to build your own "Recoil wrapper" on top of MobX and implement the exact functionality you need.

MobX-Recoil

Let's start with the atom implementation. Looking at it's Recoil implementation there are two things we need to know about it:

Options

Options parameter, that accepts key and default value (we are not going to cover all Recoil functionality):

interface Config<T> {
  key: string;
  default: T;
}

Atom

To implement Atom we need:

interface AtomType<T> {
  key: string;
  value: T;
  update: (nextValue: T) => void;
}

Knowing that it is possible to create a function that will accept Config and build AtomType:

export function atom<T>(config: Config<T>): AtomType<T> {
  class AtomImpl implements AtomType<T> {
    key: string = config.key;

    value: T = config.default;

    constructor() {
      makeAutoObservable(this);
    }

    update(nextValue: T) {
      this.value = nextValue;
    }
  }

  return new AtomImpl();
}

This allows the creation of a mobx observable class that can be used as a standalone class or passed to useRecoilValue or useRecoilState hooks.

useRecoilState

That will be a React hook that accepts an atom and returns its value. The value will be also stored with the help of useState hook that also gives a possibility to react on changes:

export function useRecoilState<T>(atom: AtomType<T>): [T, (value: T) => void] {
  const [value, setValue] = useState<T>(atom.value);
  useEffect(() => {
    const disposer = autorun(() => {
      setValue(atom.value);
    });
    return disposer;
  }, [atom]);
  return [
    value,
    (value: T) => {
      atom.update(value);
    }
  ];
}

useRecoilValue

That Recoil hook is easily to implement using useRecoilState and getting the first value of the result array:

export function useRecoilValue<T>(atom: AtomType<T>): T {
  return useRecoilState(atom)[0];
}

Selector

The next thing needed to be implemented is a selector. Each selector should implement a possibility to get and set atoms. We will focus on get functionality. And same as for atoms, each selector should have a key property. Knowing this, we need to implement functionality for:

export function selector<T>(options: {
  key: string;
  get: (util: { get: <V>(atom: AtomType<V>) => V }) => T;
}): AtomType<T> {
  ...
}

To get the actual value of the atom options.get can be used. That gives us a possibility to define new local atom that will represent the value and react to changes, using autorun from MobX. In that case the final implementation for selector can be:

export function selector<T>(options: {
  key: string;
  get: (util: { get: <V>(atom: AtomType<V>) => V }) => T;
}): AtomType<T> {
  const get = (atom: AtomType<any>) => {
    return atom.value;
  };

  const getActualValue = () => options.get({ get });

  const resultAtom = atom({
    key: options.key,
    default: getActualValue()
  });

  autorun(() => {
    resultAtom.update(getActualValue());
  });

  return resultAtom;
}

That is basically everything that we need and at this moment we can already start using "Recoil" in the project.

Benefits of that implementation

One of the benefits is that you can use the state management library you like in a new way. Another thing is the possibility to define custom atoms. For instance let's say you need to trigger some actions (could be an API call to trigger search) when textState atom is changed. To do it with Recoil you need to use effects_UNSTABLE. And using MobX you can provide a custom atom implementation:

const textState = atom(textStateMobx);

where textStateMobx is some implementation of AtomType with additional functionality:

class TextState implements implements AtomType<string> {
  key: string = 'textState';

  value: string = '';

  constructor() {
    makeAutoObservable(this);
    this.debouncedApiCall = debounce(this.doApiCall, DEBOUNCE_TIME);
  }

  update(nextValue: string) {
    this.value = nextValue;
    debouncedApiCall();
  }

  doApiCall() {
    if (this.value.length > MIN_LENGTH) {
      // some api call
    }
  }
}

Building "mobx-recoil" application

Recoil provides an example with a text input and entered symbols counter. There is almost no need to adjust it and the entire example can be taken:

function TextInput() {
  const [text, setText] = useRecoilState(textState);

  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  );
}

function CharacterCount() {
  const count = useRecoilValue(charCountState);

  return <>Character Count: {count}</>;
}

function CharacterCounter() {
  return (
    <div>
      <TextInput />
      <CharacterCount />
    </div>
  );
}

export default function App() {
  return <CharacterCounter />;
}

The only difference will be that atom, selector, useRecoilState and useRecoilValue has to be imported from your locally defined "Recoil" implementation instead of 'recoil':

import React from 'react';
import {
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from './mobx2recoil';

Thanks for reading and I hope you enjoyed the idea. A working example is available in codesandbox. And good luck with the coding!