useResetRecoilState race condition

[fjur]

How do you handle race conditions with state updating?

I have a bunch of state that I reset on a page load with a useEffect. A subcomponent depends on this state to trigger a certain set of actions, triggering action A if the state is set, and action B if the state isn't.

The problem I am having is there is a race condition from resetting the state and depending on the value of the state in a subcomponent that causes it to trigger the wrong action.

How do you handle reseting state and ensuring the right state gest used in useRecoilValue?

New Page Load
useEffect(()=>{ resetStateA(); },[])

Sub Component

const a = useRecoilValue(StateA);
useEffect(()=> {
if(a) { <-- The reset doesn't trigger in the useeffect and this fails
// Do action 1
} else {
// Do action 2
}
},[a])

[tpatalas]

It seems useRecoilCallback can be your friend. I do use it for updating multiple states together along with custom hook. You can get the current state with snapshot to create condition too. This hook is such a gem in Recoil.

[fjur]

Thanks for the suggestions! Do you mind providing an example of how you would update multiple states using useRecoilCallback since I am still a bit uncertain how to accomplish it using that callback.

[tpatalas]

Because I do not know your case, I wrote simple assumption.

Assumption: Reset the atomA or atomB with the condition whenever component A is mount on Page A

Example: With EffectComponent

// Component: IamAEffectComponent
const IamAEffectComponent = () => {
  const recoilCallbackExample = useRecoilCallback(() => ({ snapshot, reset }) => {
    const get = <T,>(p: RecoilValue<T>) => snapshot.getLoadable(p).getValue(); // use it like getter function. They do not re-render while you can still get the value

    if (get(exampleAtom1)) reset(atomA);
    if (get(exampleAtom2)) reset(atomB);

    // now useRecoilCallback will reset based on the above condition. You can create your complex condition. Above is displaying purpose only
  });

  useEffect(() => {
    recoilCallBackExample();
  }, [recoilCallBackExample]);

  return null; // will not return anything
};

// Page A
...

export const PageAComponent = () => {
...

return(
  <>
  ...
    <IamAEffectComponent/>
  ...
  </>
)

// Now Whenever the PageAComponent is routed `IamAEffectComponent` will be mounted with the condition you have made above.

}

You can still use the custom hook instead of component. I think above is little cleaner. I wrote above on the github textEditor so there might be some error. But we get the point. I think there are too many ways to create the case with useRecoilCallback.

I personally use either custom hook or effectComponent as shown above. And I use selector only for single derived state of single source of truth (atom). Anything goes multiple state updates like a transaction, and I use useRecoilCallback.
It is really beneficial since getting state with snapshot will not trigger any re-rendering of the component, but useRecoilValue does. Both have its own use-case.