Derived atoms fail to update simultaneously with their base atom in React Native

[nelyousfi]

Bug Description

What is the issue?

Hello folks,

Thank you for the amazing job you're doing with Jotai!

I encountered an issue while using Jotai with React Native. It appears that derived atoms are not updating simultaneously with their base atom.

How can it be reproduced?

import React from 'react';
import {atom, useAtom, useAtomValue, useSetAtom} from 'jotai';
import {Text, View, Button, StyleSheet} from 'react-native';

const userAtom = atom<User | null>(null);

const isUserLoggedInAtom = atom(get => !!get(userAtom));

const sleep = () => new Promise(resolve => setInterval(resolve, 1000));

type User = {
  username: string;
};

const Home = () => {
  const [user, setUser] = useAtom(userAtom);

  if (!user) {
    throw new Error('User in null');
  }

  return (
    <View style={styles.container}>
      <Text>Welcome Home {user.username}</Text>
      <Button
        title="Logout"
        onPress={async () => {
          await sleep();
          setUser(null);
        }}
      />
    </View>
  );
};

const Login = () => {
  const setUser = useSetAtom(userAtom);
  return (
    <View style={styles.container}>
      <Text>Welcome To Login</Text>
      <Button
        title="Login"
        onPress={async () => {
          await sleep();
          setUser({
            username: 'John Doe',
          });
        }}
      />
    </View>
  );
};

const App = () => {
  const isUserLoggedIn = useAtomValue(isUserLoggedInAtom);

  return isUserLoggedIn ? <Home /> : <Login />;
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

When pressing the logout button, the code above is throwing the User is null error.

I've tested similar code on React JS and with the new React Native architecture enabled, and it works fine. Therefore, I suspect the issue lies with the old React Native architecture renderer.

Also, wrapping the setUser function with unstable_batchedUpdates seems to fix the issue.

Environment:

Jotai: 2.8.3
react-native: 0.73.2
RN new architecture: disabled

Reproduction Link

https://github.com/nelyousfi/RNLab73Jotai

[dai-shi]

Also, wrapping the setUser function with unstable_batchedUpdates seems to fix the issue.

If that's the case, it's expected and unstable_batchedUpdates is the right and only fix.

[nelyousfi]

@dai-shi thanks for getting back.

What about tests?

Something like the test below fails even after enabling the react native new architecture.

import React from 'react';
import {fireEvent, render, waitFor} from '@testing-library/react-native';
import App from './App';

describe('App', () => {
  it('login and logout', async () => {
    const screen = render(<App />);

    const LoginButton = screen.getByText('Login');
    fireEvent.press(LoginButton);

    await waitFor(() => {
      expect(screen.getByText('Welcome Home John Doe')).toBeOnTheScreen();
    });

    const LogoutButton = screen.getByText('Logout');
    fireEvent.press(LogoutButton);

    await waitFor(() => {
      expect(screen.getByText('Welcome To Login')).toBeOnTheScreen();
    });
  });
});

The same issue, Home renders before App.

[dai-shi]

Maybe the test still uses the old architecture.

[nelyousfi]

@testing-library/react-native is using react-test-renderer under the hood, I don't see how it is possible to enable the new architecture for that.