Using the hooks as a context but maintain memoization

[vladfulgeanu]

I am using useSWR for my profile request in order to get various profile data (name, photo, saves etc).
So this means using useSWR in each component that needs the specific data.

The problem is that on each request, the useSWR hook makes some changes behind the scenes (based on the different request states maybe) and this triggers multiple renders on each component that uses the hook.

So if I have 10 components that use the hook, it will cause ~20 renders (2 for each component x 10). Using the React Dev Tools it would show the famous hooks changed for each component.

This can lead to many useless renders and performance problems down the way.

Is there anything that I am missing in the way I am using the hook? Can I use useCallback or useMemo behind a custom hook that uses useSWR?
I thought I'd be able to use it as a Context and it doing the required memoization behind the scenes, only triggering once per component.