Forem: Shubham Kamath

Recoil - The Asynchronous way to manage state [ Part 1 ]

Shubham Kamath — Wed, 20 May 2020 22:05:22 +0000

In previous post we got an overview of some Recoil terminologies and how to manage state using it.

Here, we will explore Asynchronous side of Recoil.

Recoil asynchronous state management supports -

React <Suspense/>. The fallback UI is rendered till the pending request is completed.
Without React <Suspense/>, status of data from Recoil hooks can be used to check if it's still loading or completed or have caught an error.

Let's create an app that would fetch and display data from an API

To start with, Create a new create-react-app and clean it for a new project and wrap <RecoilRoot/> around the root.

1. Let's start with writing a Selector which will fetch data.

import React from 'react';
import { selector } from 'recoil';

const url = `https://reqres.in/api/users?page=1`;

const fetchUserDetails = selector({
    key: 'userDetailsSelector',
    get: async ({ get }) => {
        try{
            const response = await fetch(url);
            const data = await response.json();
            return data;
        }catch(error){
            throw error;
        }
    }
});

function App() {
  return (
    <div> 
        <p> Recoil Example </p>
    </div>
  );
}

export default App;

Using selector we fetch data with fetch .
We set an async function to get parameter which will return the fetched data.
We can use value from atom to set URL parameter or body data like user id, page number and auth key but we skip it this time.

2. We create a component called <DetailsWithSuspense/> which would subscribe to fetchUserDetails Selector and render data.

import React from 'react';
import { selector, useRecoilValue } from 'recoil';

const url = `https://reqres.in/api/users?page=1`;

const fetchUserDetails = selector({
    key: 'userDetailsSelector',
    get: async ({ get }) => {
        try{
            const response = await fetch(url);
            const data = await response.json();
            return data;
        }catch(error){
            throw error;
        }
    }
});

const DetailsWithSuspense = () => {
    const userDetails = useRecoilValue(fetchUserDetails);
    const { data } = userDetails;

    return (
        data.map(item => (
            <div key={item.id}>
                <p>
     {`Email: ${item.email} Name: ${item.first_name} ${item.last_name}`}. 
                </p>
            </div>
        ))
    );
}


function App() {
  return (
    <div> 
        <p> Recoil Example </p>
    </div>
  );
}

export default App;

Here we use useRecoilValue hook to subscribe and get the value of the fetchUserDetails Selector.
But, we can also use useRecoilState hook to get the value and a function to set the value. ( Here, we can't set the value as data returned by selector is Read Only )

3. Further, Let's add <Suspense/> to render asynchronous data

import React from 'react';
import { selector, useRecoilValue } from 'recoil';

const url = `https://reqres.in/api/users?page=1`;

const fetchUserDetails = selector({
    key: 'userDetailsSelector',
    get: async ({ get }) => {
        try{
            const response = await fetch(url);
            const data = await response.json();
            return data;
        }catch(error){
            throw error;
        }
    }
});

const DetailsWithSuspense = () => {
    const userDetails = useRecoilValue(fetchUserDetails);
    const { data } = userDetails;

    return (
        data.map(item => (
            <div key={item.id}>
                <p>
     {`Email: ${item.email} Name: ${item.first_name} ${item.last_name}`}. 
                </p>
            </div>
        ))
    );
}


function App() {
  return (
    <div> 
        <React.Suspense fallback={<div>Loading...</div>}>
           <DetailsWithSuspense />
        </React.Suspense>
    </div>
  );
}

export default App;

We wrap the <DetailsWithSuspense /> with <Suspense/> which takes care of pending data while fallback component is rendered till the asynchronous call is completed or have errors.
To create an Error Handling Component, refer to Error Boundaries.

If `<Suspense/>` is not your way, Recoil still got your back! 👇

4. We create and add another component called <DetailsWithoutSuspense /> which would subscribe to fetchUserDetails Selector and render data.

import React from 'react';
import { selector, useRecoilValue, useRecoilValueLoadable } from 'recoil';

const url = `https://reqres.in/api/users?page=1`;

const fetchUserDetails = selector({
    key: 'userDetailsSelector',
    get: async ({ get }) => {
        try{
            const response = await fetch(url);
            const data = await response.json();
            return data;
        }catch(error){
            throw error;
        }
    }
});

const DetailsWithoutSuspense = () => {

    const userDetails = useRecoilValueLoadable(fetchUserDetails);
    const { state } = userDetails;

    if (userDetails.state === 'hasError') {
        return <div> There is some problem! </div>
    }

    if(state === 'loading'){
        return <div>Its loading</div>
    }

    if(state === 'hasValue'){
        const { contents: { data }} = userDetails;
        return (
            data.map(item => (
                <div key={item.id}>
                    <p>
     {`Email: ${item.email} Name: ${item.first_name} ${item.last_name}`}.   
                   </p>
                </div>
            ))
        );

    }
}

const DetailsWithSuspense = () => {
    const userDetails = useRecoilValue(fetchUserDetails);
    const { data } = userDetails;

    return (
        data.map(item => (
            <div key={item.id}>
                <p>
     {`Email: ${item.email} Name: ${item.first_name} ${item.last_name}`}. 
                </p>
            </div>
        ))
    );
}


function App() {
  return (
    <div> 
        <DetailsWithoutSuspense />
        <React.Suspense fallback={<div>Loading...</div>}>
           <DetailsWithSuspense />
        </React.Suspense>
    </div>
  );
}

export default App;

We use useRecoilValueLoadable hook to subscribe to fetchUserDetails Selector.
Further, useRecoilValueLoadable returns an object with state key, which holds current status of pending data which can be either -

a. hasError : set when an error occurs
b. loading : set when data is pending
c. hasValue : set when data is received successfully
Depending on state value, a component can be rendered accordingly.
When state value is set to hasValue, the object returned by useRecoilValueLoadable holds the data that was pending in contents key.

This would complete the little Fetch Data app which gets data asynchronously using Recoil APIs. If you want to see a more structured approach, checkout GitHub repository below.

shubhaemk / recoil-async-example

Trying the asynchronous side of Recoil

Next I will be exploring selectorFamily which is similar to selector but accepts a parameter.

At the end, I would like to thanks Reqres for giving APIs to test.

Recoil - Facebook's own State Management Library

Shubham Kamath — Sat, 16 May 2020 19:24:44 +0000

I have used Redux as my state management library extensively in projects. It takes time to set it up but once everything is up, there is no looking back.

Since it was sufficient for me, I never tried any options till yesterday when Recoil an experimental state management library by Facebook was launched.

Going through examples, I realised it's advantages over Redux, like :

Easy to set up and use
Supports asynchronous State Management
State persistence ( I'm still not sure how to implement, but I read regarding this in Source Code )

This got me like :

So how Recoil works?

It stores data in Atoms. React Components can subscribe to these atoms. The subscription can be used to get and set data from Atoms.

To get started, we need to understand few Recoil APIs

1. RecoilRoot

<RecoilRoot /> is used to wrap component, which needs access to Atoms.
Children of such components can also access Atoms.
Preferably, we wrap it around the root of application.
But, multiple roots can be present with each having different state of the same Atom.

2. Atom

Atom is where you can store state, accessible around the application.
It takes mainly two arguments, Unique key to identify the Atom and a default value to start with.

3. Selectors

Selector returns a modified state of an Atom.
It takes two argument, Unique Key and a get function that returns a modified state of the selected Atom.

Let's create a simple ToDo list app to implement Recoil

Create a simple create-react-app and clean it for a new project.

1. Let's wrap our Root Component i.e App Component in index.js with <RecoilRoot/> , this will enable Recoil State in app.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {RecoilRoot} from 'recoil';

ReactDOM.render(
  <React.StrictMode>
    <RecoilRoot>
      <App />
    </RecoilRoot>
  </React.StrictMode>,
  document.getElementById("root")
);

2. Let's create Atom and subscribe it to enable ToDo state in App.js

import React from 'react';
import { atom, useRecoilValue } from 'recoil';

const list = atom({
    key: "list",
    default: []
});

function App() {
  const listState = useRecoilValue(list);

  return (
    <div> 
     {
       listState.map(listItem => 
         <p key={listItem.id}>{listItem.value}</p>
       )
     }
    </div>
  );
}

export default App;

Using atom() we create list Atom and initialise it with a unique key and a default value.
Using useRecoilValue(list) we subscribe to any changes in list Atom while it returns current value of list.

3. Now to modify state of an Atom, there are two ways!

Using useRecoilState(list) which returns an array just like useState() React hook. This array consists of list Atom value and a function which can modify list Atom state.
Using useSetRecoilState(list) which returns a function which can modify list Atom state.

We will go with the useSetRecoilState(list) for this one.

import React, { useState } from 'react';
import { atom, useRecoilValue, useSetRecoilState } from 'recoil';
import { v4 as uuid4 } from 'uuid';

const list = atom({
    key: "list",
    default: []
});

function App() {
  const [inputValue, updateInputValue] = useState("");
  const listState = useRecoilValue(list);
  const updateList = useSetRecoilState(list);

  const changeValue = event => {
      const { value } = event.target;
      updateInputValue(value);
  }

  const addValue = () => {
     setInput("");
     updateList((oldList) => [
         ...oldList,
         {
           id: uuid4(),
           value: inputValue,
         },
     ]);
  }

  return (
    <div> 
        <div>
            <p>Enter item :</p>
            <input type="text" value={inputValue} onChange={e => changeValue(e)}/>
            <button className="addInputButton" onClick={() => addValue()}>Add</button>
         </div>

         {
             listState.map(listItem => 
                 <p key={listItem.id}>{listItem.value}</p>
              )
         }
    </div>
  );
}

export default App;

The function returned by useSetRecoilState(list) takes a callback function as an argument.
The callback function returns a value which is set to the list Atom.
The first argument in callback function also holds the current state of list Atom, here, we can use it to append latest item in existing ToDo list.

4. Let's add Selector for our ToDo list!

import React, { useState } from 'react';
import { atom, useRecoilValue, useSetRecoilState, selector } from 'recoil';
import { v4 as uuid4 } from 'uuid';

const list = atom({
    key: "list",
    default: []
});

const filterListValue = atom({
    key: "filterListValue",
    default: "" 
});

const filterList = selector({
    key: "filterList",
    get: ({get}) => {
        const listState = get(list);
        const filterListValueState = get(filterListValue);

        if (filterListValueState.length) {
          return listState.filter((item) =>
            item.value.includes(filterListValueState) && item
          );
        }
        return list;
    }
})

function App() {
  const [inputValue, updateInputValue] = useState("");
  const listState = useRecoilValue(list);
  const updateList = useSetRecoilState(list);

  const changeValue = event => {
      const { value } = event.target;
      updateInputValue(value);
  }

  const addValue = () => {
     setInput("");
     updateList((oldList) => [
         ...oldList,
         {
           id: uuid4(),
           value: inputValue,
         },
     ]);
  }

  return (
    <div> 
        <div>
            <p>Enter item :</p>
            <input type="text" value={inputValue} onChange={e => changeValue(e)}/>
            <button className="addInputButton" onClick={() => addValue()}>Add</button>
         </div>

         {
             listState.map(listItem => 
                 <p key={listItem.id}>{listItem.value}</p>
              )
         }
    </div>
  );
}

export default App;

Here we add one more Atom named filterListValue Atom which holds the filter query used by filterList Selector to filter list Atom.
Selector here filters list which contains query from filterListValue Atom.
When filterListValue Atom value is empty, filterList Selector returns whole list Atom.
Function that is assigned to Selector's get parameter is passed with Object as an argument. The get property of object is used to retrieve value from list Atom and filterListValue Atom.

5. Once Selector is added let's add functionality for filter

import React, { useState } from 'react';
import { atom, useRecoilValue, useSetRecoilState, selector } from 'recoil';
import { v4 as uuid4 } from 'uuid';

const list = atom({
    key: "list",
    default: []
});

const filterListValue = atom({
    key: "filterListValue",
    default: "" 
});

const filterList = selector({
    key: "filterList",
    get: ({get}) => {
        const listState = get(list);
        const filterListValueState = get(filterListValue);

        if (filterListValueState.length) {
          return listState.filter((item) =>
            item.value.includes(filterListValueState) && item
          );
        }
        return list;
    }
})

function App() {
  const [inputValue, updateInputValue] = useState("");

  const listState = useRecoilValue(list);
  const updateList = useSetRecoilState(list);

  const [filterListState,filterList] = useRecoilState(filterListValue);

  const changeValue = event => {
      const { value } = event.target;
      updateInputValue(value);
  }

  const addValue = () => {
     setInput("");
     updateList((oldList) => [
         ...oldList,
         {
           id: uuid4(),
           value: inputValue,
         },
     ]);
  }

  const filter = event => {
      const { value } = event.target;
      filterList(value);
  }

  const clearFilter = () => filterList("");


  return (
    <div> 
        <div>
            <p>Enter item :</p>
            <input type="text" value={inputValue} onChange={e => changeValue(e)}/>
            <button className="addInputButton" onClick={() => addValue()}>Add</button>
         </div>

         <div>
             <p>Filter : </p>
             <input
                type="text"
                value={filterListState}
                onChange={(e) => filter(e)}
             />

             <button onClick={() => clearFilter()}>
                Clear
             </button>
         </div>

         {
             listState.map(listItem => 
                 <p key={listItem.id}>{listItem.value}</p>
              )
         }
    </div>
  );
}

export default App;

Would this work? No. Why? Because we have not subscribed to Selector yet, so it might filter ToDo list but won't reflect over the component.
So we make a small change in our code shown below

- const listState = useRecoilValue(list);
+ const listState = useRecoilValue(filterList);

This would complete the little ToDo Application with Add and Filter functionality. If you want to see a more structured approach, you can checkout GitHub repository below.

shubhaemk / recoil-example

Recoil state management library implementation

Let me know your opinion on Recoil. In next post I have explained asynchronous side of Recoil. Cheers!