Troubleshooting SWR Mutations and Rerendering

[taylorhlabs]

UPDATE/TLDR: When updating arrays using mutate, it seems that a rerender only happens if I change the length of the array or order of objects in the array. How can I trigger a rerender when only changing a property on an object in the array AND I want to preserve the original order of objects in the array? And yes, I am passing a NEW array into the mutate method but that doesn't seem to help. (see code example below)

MORE DETAIL: While using SWR, it seems that some mutations do not cause certain components to rerender when I expect them to. From a troubleshooting perspective, I've found it difficult to isolate whether the issue is that SWR is not triggering a rerender OR whether the component is not rerendering when it should (or I want it to 🙄 ). I often have issues triggering a rerender when mutating an array where only a property within an object in the array changes or when replacing an existing object in an array with an updated object.

Below is an example of where I replace an existing object in an array and then call the mutation to update the data but the component does not rerender:

  // this function is called to update resource data; react-table should update after mutate function is called
  function handleChange_Resource(changedResource) {
    const newData = [...data];
    let resourceIndex = newData.findIndex((resource) => resource.id === changedResource.id);
    if (Number.isInteger(resourceIndex)) {
      newData[resourceIndex] = changedResource;
      console.log('Ran Function: handleChange_Resource:', newData, changedResource, resourceIndex);
      mutate('/api/get-resources-more', newData, false);
    }
  }

While doing some troubleshooting, if I remove an object from the array, a rerender is triggered. It seems I need to make more "substantial" changes to the array (like changing the length of it) to cause a rerender.

My question: how can I better know if SWR is not triggering the change when I expect it to OR if the component is not rerendering despite SWR passing on the data changes? Is there anyway to log when SWR does its data comparison and decides that data has indeed changed?

I'd be grateful for any tips related to troubleshooting rerender issues with SWR to help determine if the issue lies with my implementation of SWR or the component. For instance, if I just revalidate the data using mutate('/api/get-resources-more') and the component doesn't rerender, is it likely the issue lies with the component? If you made it this far, thanks for reading!

[ErnestBrandi]

Hi, from the doc (https://swr.vercel.app/docs/options), SWR uses dequal (https://github.com/lukeed/dequal) as a compare function in order to trigger a rerender or not.
Seems like the following would trigger a rerender

dequal(
   [{ id: 1 }, { id: 2, nested: { foo: "bar" } }],
   [{ id: 1 }, { id: 2, nested: { foo: "rab" } }]
) 
// == false => should trigger a rerender

[taylorhlabs]

Hey @ErnestBrandi, thanks for your input. I took a similar approach to troubleshooting the issue and pulled dequal into my app to check for equality and dequal(oldData, newData) was evaluating to true in my case. Turns out I was mutating the data incorrectly. 🙄

I ended up with the following solution to correctly mutate the data so SWR triggered a re-render:

function handleChange_Resource(changedResource) {
    const resourceIndex = swrResources.findIndex((resource) => resource.id === changedResource.id);
    if (resourceIndex > -1) {
      const newData = swrResources.filter((resource) => resource.id !== changedResource.id);
      newData.splice(resourceIndex, 0, changedResource);
      console.log('Ran Function: handleChange_Resource:', newData, changedResource, resourceIndex);
      useMutateLibrary(newData);
    }
  }

You can find more info on me stumbling over mutations here in case it's helpful to others. TLDR: I need to update deeply nested arrays and objects throughout my app which can be easy to screw up and getting the syntax correct can be a pain so I ended up using a mutation library called immutability-helper. I didn't end up using it in this particular case, but it's super helpful for properly mutating nested arrays/objects so that SWR re-renders when you want it to.