SWR mutations causing React Native flatlist images to flash due to re-rendering

[adherb]

I am fetching an array of posts using SWR in a React native app and then displaying the data using React Native's flatlist.

When a user click's a like button on an item a function is called and the data is mutated on the server and the cache is updated to reflect the updated data.

The issue is when the data is mutated and revalidated it causes the flat list to re-render and the images to flash.

I have tried using useCallback to wrap the function and React.memo to wrap the renderItem, but neither are fixing the issue.

I've also made the keyExtractor a random number, to make sure each item is receiving a unique value.

How can I avoid this happening using SWR? Should I set revalidate:false?

Here is my code:

export function PostList() {
  const { mutate } = useSWRConfig();
  
  const { data, error } = useSWR(
    `${process.env.SERVER_API}/posts?userId=1`,
    fetcher
  );

  if (error)
    return (
      <View>
        <Text>failed to load</Text>
      </View>
    );
  if (!data)
    return (
      <View>
        <Text>loading...</Text>
      </View>
    );


  async function likePost(postId) {
    try {
      const response = await fetch(
        `${process.env.SERVER_API}/likePosts`,
        {
          method: "POST",
          body: JSON.stringify({ postId, userId: 1 }),
          headers: {
            "Content-Type": "application/json",
          },
        }
      );
      const data = await response.json();
      if (!response.ok) {
        console.log("Something went wrong!");
      }
      console.log("data", data);
    } catch (e) {
      console.log("There was a problem!");
    }
    return data;
  }

  const onClick = useCallback((postId) => {
      const options = {
        rollbackOnError: true,
      };

      mutate(
        `${process.env.SERVER_API}/posts?userId=2`,
        likePost(postId),
        options
      );
  }, []);

  const Item = React.memo(
    ({ id, title, image, categories}) => (
      <>
        <RecipeCard
          id={id}
          title={title}
          image={image}
          onClick={onClick}
        />
      </>
    )
  );

  const renderItem = ({ item, index }: any) => (
    <Item
      index={index}
      id={item.recipe_id}
      title={item.title}
      image={item.image
      categories={item.categories}
    />
  );

  const keyExtractor = () => Math.random();

  return (
    <>
      <FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={keyExtractor}
      />
    </>
  );
}