Check if the server response actually changed

[mlisthenewcool]

With very basic architecture like this :

const Item = ({ _id, title }: { _id: string; title: string }) => (
  <li>
    item {_id} {title}
  </li>
)

const Items = ({ items }: { items: { _id: string; title: string }[] }) => (
  <ul>
    {items.map((item) => (
      <Item key={item._id} {...item} />
    ))}
  </ul>
)

const ItemsConnected = () => {
  const { data } = useItems() // custom hook
  return <Items items={data} />
}

All the items are actually re-rendered even if the server response is exactly the same. How could I setup react-query to re-render only if the data actually changed ?

[TkDodo]

it's re-rendering because of the isFetching transition. Please read. https://tkdodo.eu/blog/react-query-render-optimizations

tracked queries solve this. that being said, please read the disclaimer. rendering a list of items shouldn't be a problem, even if you do it "unnecessarily" from time to time :)

[mlisthenewcool]

Works like a charm, thanks for the quick answer !