How does dependency collection reduce re-renders?

[pke]

The docs state

SWR only updates the states that are used by the component,

How? I fail to understand, how the object destruct (which happens outside the realm of the useSwr hook) leads to less re-renders?
The swr hook still exports a new object on changes of its internal state, and it doesn't know how callers of the hook will destruture it.

So how does this magic work - javascript wise?

[HullQin]

With same question, I saw the source code, realizing SWR is really amazing!

The answer is use-swr.ts and utils/state.ts.

useStateWithDeps in utils/state.ts export [stateRef, stateDependenciesRef, setState]. When we setState, it will not rerender directly. However, it checks the stateDependenciesRef, and only rerenders when accessed states change.

The most magic thing is how to detect accessed states (btw, before seeing the code, I thought only babel could make it):
Just see the code: the object that useSWR return is:

  return {
    mutate: boundMutate,
    get data() {
      stateDependencies.data = true
      return data
    },
    get error() {
      stateDependencies.error = true
      return error
    },
    get isValidating() {
      stateDependencies.isValidating = true
      return isValidating
    }
  } as SWRResponse<Data, Error>

As long as we access data or error or isValidating, the stateDependencies will be set.

Ref: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/get

I think we can do more interesting things after knowing it 😄

[pke]

Yes, indeed its pure genius and a whole different level of writing hooks..
I digged into the source code with a colleague a couple of hours after I wrote this question here already but didn't find the time to update the question.

And it was eye opening that they used getters to do the magic in tandem with React references.

Now I wonder, like you, if that is a way to write higher performant hooks?

And for that matter I wonder if you or @shuding have some ideas about interdepend swr hooks like I ask over here:
#1839

[icyJoseph]

Yes it is amazing! When I first saw it, I thought I'd find more online, but couldn't really find much, so I wrote up a little study: https://github.com/icyJoseph/state-with-deps -

[pke]

Great writeup @icyJoseph! Was a blast to read. I am currently facing massive re-rendering problems in my app, probably caused by relying too much on swr dependend cache keys, but I wonder how much faster react app really would be with proper optimised hooks.

Any thoughts on cache keys with dependencies #1839?

[icyJoseph]

Ah, got nothing ready, but I do recall two questions asked here before, perhaps those can help you:

• Accessing the same SWR hook in nested components #1782

  • On accessing the same key in nested components. I expanded on this one here, but it's nearly the same content.

• How does Vercel use swr? #1408 (comment)

  • On how does Vercel architect their applications, using swr

I reckon, "react component composition" might help you to reduce react-rendering frames.

There's also a combination of render props with hooks, that can help you isolate hook changes. This video from React Europe, explains it way better than I could ever do, video.