Best practices for mutating the local cache for PATCH/PUT and DELETE

[KonigTibor]

Dear All,

I have a list of items coming from a REST API, displayed in a list (or table, doesn't matter). When I make modifications I would like to get a fast and smooth rendering so I use mutation. Adding a new item works perfectly but after updating or removing an item I have problems with the rendering. So far, I tried two methods listed below, please take a look and advise what I should change.

A couple of quick notes for the code: key and data come from SWR, items is an array of items returned by the API, index is the index of the item to be modified/removed, and updatedItem is the new value of the item to be modified.

Splice

Problem: After the following type of mutation, the whole list of items gets rerendered.

When updating:

mutate(key, { ...data, items: [...data.items.splice(index, 1, updatedItem)] }, false);

When deleting:

mutate(key, { ...data, items: [...data.items.splice(index, 1)] }, false);

Slice

Problem: After the following type of mutation, the changes get rendered in a strangely staggered manner. The line containing the modified item moves to the end of the list then jumps back to its correct position. The line containing the deleted item also disappears in two visible steps.

Observation: It seems that during this one mutate() call, the items array is changed several types.

When updating:

mutate(
    key, 
    { 
        ...data, 
        items: [
            ...data.items.slice(0, index), 
            updatedItem, 
            index < data.items.length - 1 && data.items.slice(index + 1)
        ] 
    }, 
    false
);

When deleting:

mutate(
    key, 
    { 
        ...data, 
        items: [
            ...data.items.slice(0, index), 
            index < data.items.length - 1 && data.items.slice(index + 1)
        ] 
    }, 
    false
);

Any help greatly appreciated.

TK

[sergiodxa]

Try to pass a function to mutate, this function will receive the current data, you can then use it for the spread.

mutate(key, currentData => ({ ...currentData, items: [ ...currentData.items.slice(0, index), index < data.items.length - 1 && data.items.slice(index + 1) ] }), false)

Something like that.

[KonigTibor]

It still re-renders the whole list. My aim is to avoid complete re-rendering when only one element changes. When I modify one element in a list only that element should be re-rendered and the rest of the list should not. When I remove an element the elements above that should not be re-rendered and the ones after it should move up one line. Is it possible?

[sergiodxa]

That should happen if you are using the prop key on each element of your list, this way React will avoid touching the DOM of the other items, if you want to explicitly make React don't call your component you can wrap it in React.memo, this way if your props (the data of each item) doesn't change React will avoid rendering your list item components, it will only re-render your list and the updated items.

Also, another reason your list item components may be re-rendering is because you are passing a callback in their props and that callback is not wrapped in useCallback.

Note, however, that re-renderings are not bad, most of the time they are not a problem, and if they eventually become a problem you usually have another problem which is showing up because of the re-render, like doing an expensive computation inside the render instead of an useEffect or useMemo.

[drumst0ck]

Try to add a ID in the key .Map loop instead of index