`set` from `initializeState` does not trigger hooks

When reinitializing state using initializeState on RecoilRoot it appears that calling set does not trigger hooks, so my app is not updated.

In the image below you can see:

1. initializeState being run first (“Init state”)
2. The first value read from useRecoilValue - this is the default value
3. set is called inside initializeState but useRecoilValue isn’t triggered again

I’m using Recoil with React Native based on #114 - perhaps this is related to that?

This is the code I use to persist my atoms:

export default function createRecoilPersistor(
  atoms: Array<RecoilState<any>>
): Persistors {
  function initializeState({ set }: Initializer): void {
    console.log('Init state');
    for (const currentAtom of atoms) {
      const { key } = currentAtom;
      AsyncStorage.getItem(key).then(value => {
        if (value !== null) {
          console.log('Set value for ' + currentAtom.key, { value });
          set(currentAtom, JSON.parse(value));
        }
      });
    }
  }

  function RecoilPersistor(): null {
    useTransactionObservation_UNSTABLE(
      ({ atomValues, modifiedAtoms }: Observation): void => {
        for (const modifiedAtom of modifiedAtoms) {
          const matchingAtom = atoms.find(({ key }) => key === modifiedAtom);
          if (matchingAtom) {
            AsyncStorage.setItem(
              modifiedAtom,
              JSON.stringify(atomValues.get(modifiedAtom))
            );
          }
        }
      }
    );
    return null;
  }

  return {
    initializeState,
    RecoilPersistor
  };
}

Then in my App.js:

const { RecoilPersistor, initializeState } = createRecoilPersistor([
  darkModeAtom,
  userAuthAtom,
  userDetailsAtom
]);

function useTheme() {
  const darkMode = useRecoilValue(darkModeAtom);
  console.log({ initDarkMode: darkMode });
  const baseTheme = darkMode ? eva.dark : eva.light;
  const statusBarStyle = darkMode ? 'light-content' : 'default';
  return [{ ...baseTheme, ...customTheme }, statusBarStyle];
}

function App(): React.ReactElement {
  const [theme, statusBarStyle] = useTheme();
  return (
    <ApplicationProvider {...eva} theme={theme}>
      <StatusBar barStyle={statusBarStyle} />
      <NavigationRoot />
    </ApplicationProvider>
  );
}

export default function AppRoot(): React.ReactElement {
  return (
    <>
      <IconRegistry icons={EvaIconsPack} />
      <SafeAreaProvider>
        <RecoilRoot initializeState={initializeState}>
          <RecoilPersistor />
          <App />
        </RecoilRoot>
      </SafeAreaProvider>
    </>
  );
}

[drarmstr]

The initializeState prop is only intended to setup the initial state before the initial render. This is useful for supporting things like server-side rendering where it is critical the state is hydrated for that initial render. It is not intended for async updates to state. Use the existing Recoil hooks for updating state asynchronously, such as useSetRecoilState() or useRecoilCallback()

[drarmstr]

initializeState will only initialize on first mounting. Otherwise if the host component were ever re-rendered for any reason the state would unexpectedly be re-initialized. You can add a key prop to <RecoilRoot> to force re-mounting and re-initialization.