How to Re-Render Large Lists Optimally When States Change in React
By: Nikhil Ahir
Tags: JavaScript, Recoil, Programming, React, React Hook

Recoil documentation for atom states below.

An atom represents state in Recoil. The atom() function returns a writeable RecoilState object.

Note: all atom values are frozen.

Selectors represent a function, or derived state in Recoil. You can think of them as a “pure function” without side-effects that always returns the same value for a given set of dependency values.

As per Recoil, we need to wrap our application into RecoilRoot tag so that we can use Recoil state.

Components that use recoil state need RecoilRoot to appear somewhere in the parent tree

Screenshot by author.

Our data contains four record where two employees are managers and two are not. If the isManager field is true then the employee is manager.

Screenshot by author.

Now we will create our application state using atom . The data object contains data from above screen shot.

Screenshot by author.

We will be using selector to derive the data from the employeeDataState . Also, selector has get and set methods.

The get method will help us derive a piece of data from the application state. Here we will be deriving the complete state. In the set method we will be getting the updated record for an employee as parameter. We will be updating the employee list with this updatedEmployee record.

If only a get function is provided, the selector is read-only and returns a RecoilValueReadOnly object. If a set is also provided, it returns a writeable RecoilState object.

Screenshot by author.

Now in our EmployeeList we just need to glue this selector data so that when the state is updated the list is also updated. For this we will be using the hook, useRecoilState , from the Recoil library.

useRecoilState returns a tuple where the first element is the value of state and the second element is a setter function that will update the value of the given state when called.

When the setEmployee is called it will make a call to the set method of the selector that will update the employeeDataState data. It will in return trigger the employeeState selector. And as this selector is being used in EmployeeList the list will be updated.

EmployeeList(setEmployee) -> employeeState(set method) -> employeeDataState -> employeeState(get method) -> EmployeeList

Screenshot by author.

Our Employee component is a memoized component which receives employee and setEmployee function as parameter.

In our Employee component we will be displaying a table with employee firstName , lastName and if employee is a manager or not. The last column will contain radio items which we can toggle. When the radio items are clicked, a call is made to the setEmployee method which will trigger the update in our application state.

Screenshot by author.

We also have a component ManagerCount that will just display the count of managers in the list. First we will create a selector which will return the manager count from the application state. In the managerSelector below, we just have a get a method which filter’s and returns the employees that are managers.

Screenshot by author.

Now in our ManagerCount component we just want to read the value from the selector so we will use the hook useRecoilValue .

useRecoilValue returns the value of the given Recoil state. This hook will implicitly subscribe the component to the given state.