Q&A: Is this somehow related to "reselect"

[pke]

At the core this library and "reselect" seem to do the same thing for derived state. With the addition that recoil can be used with async flows. "reselect" uses memoization, does recoil too?

[BenjaBobs]

Yes, Recoil caches the result of selectors until the dependencies change.

[pke]

Thanks for the quick answer! Now I need to find out how it is related to useSWR which I already use as an application cache. It seems recoil also could do a lot what SWR/ReactQuery do.

[BenjaBobs]

It appears that SWR / ReactQuery do both fetching logic, and state management. Recoil only does state management, but you could yourself build fetching logic on top of it.
The example on the SWR github:

const { data: events } = useSWR('/api/events')

Could be replicated in Recoil as something similar to this (typescript):

const getApi = selectorFamily({
	key: '_getApi',
	get: (path: string) => async () => {
		const response = await fetch(path);
		const data = await response.json();
		return data;
	}
})

export default function SomeComponentThatUsesEventsApi() {
	const events = useRecoilValue(getApi('/api/events'));

	return <pre>{JSON.stringify(events)}</pre>
}

[pke]

yeah, SWR is agnostic, so its not bound to use fetch but rather acts as a global namespaced state. It has this behaviour that it re-evaluates its cache on each mount, which leads to the "fetch" (which just means get the data for this cache key) being called. Most of the time this is not necessary.

I wonder if I could replace swr with recoil.

[BenjaBobs]

I definitely think you can use Recoil instead.

[davidmccabe]

A big difference between Recoil and many other systems (including reselect) is that with Recoil you split your state into small pieces, each with their own subscribers. This is more scalable than having a single chunk of state and having to re-evaluate all selectors every time any state changes. Even if your selectors can bail out quickly, eventually apps with a large number of selectors will hit performance limits from that approach.

[pke]

Thats probably also the reason why one should not have a bunch of useReducer based contexts wrapped arround the App

[ShravanSunder]

@pke how would you deal with the other features useSwr and react-query provides like the dedupe, revalidation, pagination etc? Also i thought swr was fragmented by key that sliced up the cache.

[ivanjeremic]

I think dedupe is not a thing because this is done by selectors too, revalidation is also no problem recoil has this, pagination is also a matketing thing I guess you can rebuilt this in a day.