Recoil state updates are out of sync with React component state

[Pinpickle]

Recoil version: 0.3.1
React version: 17.0.2

If a component has both Recoil state and React component state, and both are updated at once, a full render will occur (including effects and committing to the DOM) with the old Recoil state and the new React component state, before re-rendering with the new Recoil state.

This still occurs when:

• unstable_batchedUpdates is used
• React 18 alpha is used (even with ReactDOM.createRoot)

Example code

import { atom, useRecoilState } from "recoil";
import React, { useEffect, useState } from "react";

const indexAtom = atom({
  key: "index",
  default: 0
});

export const TestComponent = () => {
  const [stateIndex, setStateIndex] = useState(0);
  const [recoilIndex, setRecoilIndex] = useRecoilState(indexAtom);

  useEffect(() => {
    console.log("=== Effect from render ===");
    console.log("Local state: ", stateIndex);
    console.log("Recoil state: ", recoilIndex);
  });

  return (
    <button
      onClick={() => {
        setRecoilIndex(recoilIndex + 1);
        setStateIndex(stateIndex + 1);
      }}
    >
      Local state: {stateIndex} <br />
      Recoil state: {recoilIndex}
    </button>
  );
};

When clicking the button, you'll see the following being output:

=== Effect from render === 
Local state:  
0
Recoil state:  
0
=== Effect from render === 
Local state:  
1
Recoil state:  
0
=== Effect from render === 
Local state:  
1
Recoil state:  
1

Notice how on the second effect, local state and recoil state are different, despite being set to the same value on the same call.

I would expect the second effect to never occur - if component state and Recoil state are set simultaneously, they should be updated atomically.

Codesandbox demo: https://codesandbox.io/s/sharp-https-3ydwz?file=/src/TestComponent.js

[Hainesy]

I'm seeing the same issue in v0.2.0

[drarmstr]

Currently they are updated incrementally. However, a change is landing that also adds support for React's useTransition() with Recoil state that will allow React and Recoil state to be updated together. Currently undergoing internal testing.

[Pinpickle]

@drarmstr sounds great! Does this mean that React 18 will be needed to make use of this change? Any idea when this will land (days, weeks, months?)

[drarmstr]

It's already landed in the nightly build, but to test it you'll have to enable the recoil_early_rendering_2021 feature flag in Recoil_gkx.js and have React's experimental useMutableSource available, though React 18 itself is not required.

[Pinpickle]

I can confirm after editing the bundle manually on the nightly build, it works!

@drarmstr is there a way to set flags in Recoil_gkx.js without rebuilding?

[drarmstr]

I can confirm after editing the bundle manually on the nightly build, it works!

@drarmstr is there a way to set flags in Recoil_gkx.js without rebuilding?

You should be able to find where the gks variable is set in the built files and patch it there. Sorry we don't have a more sophisticated feature flag system for the open source build yet.

[maxsupera]

Experiencing the same issue here! cant wait for the update :)

[theninthsky]

Same as above, as we are heavily relying on this feature :)
We might be misusing things, but I find it very convenient to use useState and useRecoilState interchangeably in conjunction with useEffect.

[timiscoding]

If you can't wait for the fix, you could patch-package 0.4.0 by enabling the feature flag and install react@next and react-dom@next which includes the requisite useMutableSource hook. I get a warning about not using the newer ReactDOM.createRoot API so it'll behave like React 17 which is fine by me as I'm not ready to opt into concurrent mode.

[drarmstr]

Also see #759

[drarmstr]

Addressed in main branch for 0.6 release.

[Leykwan132]

Is this issue solved? I am still facing the similar issue here.

[Leykwan132]

  const profileData = useRecoilValue(profileState);
  const setProfileUrl = useSetRecoilState(profileState);
  useEffect(() => {
    setProfileUrl(JSON.parse(window.localStorage.getItem("profileData")));
    console.log(profileData)
  }, []);

I am trying to set the atom to the localStorage value but it seems like it requires a re-render which would potentially crash the application. Any solution to this, thanks!

[jacksonjp]

const tempFahrenheit = atom({
    key: 'tempFahrenheit',
    default: 32
  });

  const [tempF, setTempF] = useRecoilState(tempFahrenheit);

  const handleClick = () => {
    flushSync(() => {
      setTempF(11);
    });
    flushSync(() => {
      console.log(tempF);
    });
  };

The above displays 32 when onClick handler is called. Tried to opt out of batching with React 18, but still fails getting the latest value.