React with Recoil, large array is lagging because of many re-renders

Question

I have an array of objects, around 400 items.

The component tree looks something like this

App
  -> Page (useRecoilState(ListAtom) for consumption)
    -> List 
      -> Item (useSetRecoilState(ListAtom) for mutation)
        -> Information
        -> Button

In the <Item> component, I display some <Information> which the user will look at and click the button to trigger something.

When the button is clicked, it makes a call to my backend, and upon success, the button will change its text.

This is all working as expected, but when the button re-renders, it causes a re-render for the entire tree.

I'm following this: https://recoiljs.org/docs/basic-tutorial/atoms/

To update an attribute of an item in the list, you need to replace that item with a new copy and return a completely new state, this will cause everything to re-render again, which takes a few seconds.

In the <Item> I'm using useSetRecoilState so I don't subscribe to changes as described here: https://recoiljs.org/docs/api-reference/core/useSetRecoilState

I was thinking that because these objects are referenced by memory, it would know not to re-render the non-mutated items, but looks like this isn't the case.

I might not be structuring my app or using Recoil correctly, but this seems to be what Recoil's tutorial is teaching devs to do, anyone got any ideas?

Answer 1

You can suppress rerenders, which is a painstaking process if you didn't build your app with performance in mind. Or you can virtualize.

https://www.npmjs.com/package/react-intersection-observer

import React from 'react';
import { useInView } from 'react-intersection-observer';

const Item = () => {
  const { ref, inView, entry } = useInView({
    /* Optional options */
    threshold: 0,
  });

  if (!inView) return null

  return (
    <div ref={ref}>
      <h2>{`Header inside viewport ${inView}.`}</h2>
    </div>
  );
};

An early return null (or basic placeholder html) when the row is not visible is a quick win that might completely solve your performance problem

Answer 2

Turns out there were two things I was doing wrong

1. You need to use the AtomFamily utility, which essentially is a collection of Atoms that creates a dictionary. You give each atom a specific identifier so you can retrieve it by id. See https://recoiljs.org/docs/api-reference/utils/atomFamily

2. I was using a selector that that .filter'd the original array of data, creating a completely new array, I thought I read somewhere that recoil will handle renders of children via the member reference of objects in the array, but I was wrong. I had to first filter out the raw list into separate atoms based on an attribute, then use those.