According to its official documentation, Recoil is “a state management library for React”. There are a couple of reasons why Recoil is best chosen to manage states in a react application rather than using React’s built-in state management capabilities (including context).

Gatsby, on the other hand, “is a React-based open source framework for creating websites and apps”. Building web application using Gatsby can be fast and easy. Inside the Gatsby application, state management can be handled using Recoil.js.

The Problem

Integrating Recoil in an existing React application, according to its documentation, is simple enough. After installing the Recoil package using either npm or yarn, one could just import RecoilRoot component at the top of the application’s component tree and voila! atom and selector can be used instead of React’s own state management(useState).

What better way than to show it through code examples. Here, a new Gatsby project is started using the default Gatsby starter (gatsby-default-starter).

Gatsby Default Starter default view

The states should persist across components and pages in the Gatsby site. In the components folder (src/components), two components have been created: Input and Display components. They are then imported into IndexPage page:

Input component

#code #gatsbyjs #recoiljs #recoil #gatsby