SWR Optimization

[ghost]

From what I understand, SWR essentially uses the fetcher function to poll your API at every interval of time in order to revalidate it's current state. However, how does that work with regards to memoization and optimization? Won't the refetch trigger a rerender?
Especially if you have dependent components, like TeamList > Team > TeamMember in which you have to prop drill IDs between levels you could have many needless rerenders.

[shuding]

Won't the refetch trigger a rerender?

SWR uses 2 techniques to avoid unnecessary re-renders. In conclusion, the case you mentioned will not happen.

Deep Comparison

Every time a "fetch" (revalidate) is triggered and when the data arrives, SWR uses deep comparison to check if the data has changed. If nothing changes, SWR will not update the state and no re-render will happen.

Currently, it uses this lib to check the data equality.

Dependency Detection

A normal use case of SWR is that you have some states being used by the component:

const { data, isValidating } = useSWR(...)

The component will be rendered 3 times, caused by this 3 state changes:

data=undefined, isValidating=false → data=undefined, isValidating=true → data="OK", isValidating=false

However, if you are only using data, for example:

const { data } = useSWR(...)

The component will be rendered 2 times:

data=undefined → data="OK"

because isValidating is never accessed. If you are interested in the implementation details: #186.