Create an atom that always reflects an up-to-date external value

[papermana]

Is there a way to store a value in an atom such that it's always guaranteed to be up-to-date and there's no delay in setting it?

I have some code that I want to move to Recoil because of performance reasons (everything gets rerendered all the time). Here is a much simplified version:

// MyComponent1
const queryResult = useQuery(/* some Apollo stuff */);

if (!queryResult.data) return null;

return <MyComponent2 data={queryResult.data} />;

// MyComponent2
const transformedData = useMemo(() => expensiveTransformation(data), [data]);
const someMethodsAndStuff = useSomeHook(transformedData);

return <MyContext.Provider value={{ someMethodsAndStuff }}>/* some children */</MyContext.Provider>;

// MyComponent3
const { someMethodThatUsesData } = useContext(MyContext);

The advantage of this solution is that transformedData is always available. I could set an atom's value in useEffect, but there will be a delay (two renders with the default value in my test). I could also modify expensiveTransformation to set the value in the atom directly, but I wish there was a way to decouple the two.

What's the best pattern for dealing with this? Frankly, I hoped there would be something like:

useRecoilMemoAtom(transformedData);

Or if this doesn't fit the purpose of atoms, then another way of thinking about this could be that we can create a selector that mirrors a value and provides a pass-through from React to Recoil.

Edit: I've been thinking about this, and it probably could not work frictionlessly like I imagined. Props and even contexts are values passed down the tree, but the Recoil state is global. So if we changed it mid-render, which is essentially what I wanted, we could end up with inconsistent results on the screen.

However, what would be the preferred solution then? I guess the thing that bothers me is that I don't want to add even more null checks. Something I enjoyed about contexts is that you can be sure the value is there.

[drarmstr]

Async data could be used as an input to the data-flow graph via a selector. You could also use Atom Effects to subscribe to some external value change and update an atom. In either case you can have derived selectors which will be updated automatically. However, if your external value is obtained via a React hook, then neither of these approaches will work as you cannot use hooks from within a selector or effect. In that case useEffect() can be used by some component just for the purposes of keeping the external state in sync with an atom. Note that we are currently working on an optimization that will issue re-renders earlier for state updates which may possibly help reducing your latency or React/Recoil state consistency issues. (See #1076)

[papermana]

Thanks for your reply. I'm also happy to hear about the work on optimizations. I ended up just using an effect to sync an atom with the value I needed and that worked better than I expected.

Still, it feels to me like there's a functionality missing. You can select a single atom with a hook or a selector, or multiple atoms with a selector, but you can't select multiple atoms via hooks. I'm not sure how many different use cases would be for this other than mine, but something like this could be useful:

const myList = useContext(MyListContext);
const mappedList = useRecoilCalculation(({ get }) => myList.map(item => get(myListItemAtom(item.id))));
// or
const mappedList = useMultipleRecoilValues(myList.map(item => myListItemAtom(item.id)));

Of course, I wouldn't know if this is hard or undesirable.

Great library, BTW. Got me excited about React again.

[drarmstr]

Yeah, for reading multiple atoms/selectors you can always use a selector, but it is defined outside the component itself. There is a proposed hook in #985 that would allow inlining in a hook as you suggest. Some nuances to work out, but it's an interesting proposal.