A Basic Intro to Recoil JS

Introduction

Recoil is a fancy new state management library for React that helps React developers write cleaner and more efficient code. Created by Facebook, the same developers of React, Recoil is still considered to be in an experimental phase, and is not recognized as an official part of React, but it seems that it will become another extremely popular library for React devs in a short order of time.

React developers can surely all relate to the confusing act of jumping back and forth between files to check for states set in parent elements and determine whether that state can be modified somehow in a child element. There is also some limitation in vanilla React efficiency, as some state may need to be passed and shared between many views, and this can lead to unintentional and larger re-renders than expected in some cases. Recoil has a few impressive ways to combat this inefficiency that we’ll explore further.

Recoil JS Core Concepts

Recoil introduces two important concepts that are integral to its function: atoms and selectors. Atoms essentially allow you to define the state of a particular piece of data, while selectors can “select” atoms, look at the state stored in the atom, and return a modified state that will cause an element to then be re-rendered. Allowing elements access to atoms is achieved by wrapping the element with a <RecoilRoot> tag in the rendered JSX html-like structure, like so:

ReactDom.render(
  <RecoilRoot>
    <App />
  </RecoilRoot>,
  document.getElementById('root')
);

Atoms help to combat the problem that arises in React that state must be declared in the top level of a React tree, while it is used at the leaves of the tree. If there are several branches between the top of the tree and the leaf that uses that state, the state must be passed through as a prop through many levels. There can also be problems that arise if a leaf changing a state will modify another element that is completely separate from it. Re-rendering large chunks of an app can result from this. The lead developer for Recoil, Dave McCabe, shows how those leaves can interact and how atoms provide an almost three-dimensional view of state in his video description of Recoil on their website.

from recoiljs.org

Coding with Recoil

Let’s take a look into some basic Recoil code that might go into building a Todo list. Many of these methods may seem a bit overkill or clunky for such a small app but when used at larger scales will be incredibly useful.

<script src=”https://gist.github.com/gregthompson27/6dc021f42e5391905fab87a3048f16d6.js”></script>

As you can see, a recoil atom takes two arguments — a key and default value. Assigning a new variable to a useRecoilValue, and passing in an atom, will give that variable access to the atom. Using this variable to map through the array stored in the atom to create separate DOM elements will give each of those elements access to the atom, which they can look to to check for changes in state and re-render when the state does change. It’s a pretty nifty way to pass state along to multiple elements without needing to get props from a parent DOM element. This just scratches the surface of how Recoil JS works, but you can check out more at the Recoil JS docs.

Conclusion

While still in its infant, experimental state, Recoil JS is likely to become an extremely popular library to use with React because of the simplicity it allows in coding and the efficiency it allows more complex applications that have multiple components that check for changes in state. I highly recommend that if you are a develop that uses React on a consistent basis that you dive into learning the ins and outs of Recoil, especially as it continues to roll out new methods and bug fixes and becomes a much cleaner product.