Keep state after new request done if content was not updated

[dalisoft]

Problem

Let's say i have database and i'm planning implement real-time updates but WebSocket not available due of network problems.
I am want to get updates always latest, but keep in state without changing useQuery() => {data} as re-rendering happens when useQuery hook changes data every time

Tried bugs

Tried implement custom-hook for caching

import deepEq from 'fast-deep-equal';

const useQueryCache = (input) => {
  const response = useRef();
  const result = useQuery(input);
  
  useEffect(() => {
    if (!deepEq(result.data, response.current.data) {
      response.current = result;
    }
  }, [result]);
}

return response.current

but it's not worked

Why need?

For UI performance reason. Using React.memo on every component isn't what i'd want

Additional description

There some visualization of what i'd want

Request → Fetched → Content (123-123-123) → UPDATE/CREATE STATE (Initial, First time)
Fetched → Fetched → Content (123-123-123) → DO NOT TOUCH STATE (Skip re-rendering)
Fetched → Fetched → Content (123-223-123) → UPDATE STATE (Do re-rendering)
Fetched → Fetched → Content (123-223-123) → DO NOT TOUCH STATE (Skip re-rendering)
Fetched → Fetched → Content (123-223-123) → DO NOT TOUCH STATE (Skip re-rendering)

[louis-young]

Hi 👋

The query hook will be scheduling re-renders as it updates its internal state (is it loading, is it fetching, do we have data, etc). Why is this problematic for you? Structural sharing will keep the referential identity of the data stable as much as it can.

You might also be interested in reading this: https://tkdodo.eu/blog/react-query-render-optimizations

[dalisoft]

Thank you for response @louis-young
For me required always not changing is: {data}

I will look into blog post, thank you