RecoilJs is freezing the UI

[thegauravthakur]

I'm using recoil Js for my project. I tried searching for the solution but found nothing. So I'm posting my issue here.
I Have one atom

export const currentUserState = atom<User | null>({
  key: "currentUserState",
  default: null,
});

and I'm using it in

const Startup: React.FC = ({ children }) => {
  const [loading, setLoading] = useState(false);
  const setCurrentUser = useSetRecoilState(currentUserState);
  useEffect(() => {
    setLoading(true);
    app.auth().onAuthStateChanged((user) => {
      setCurrentUser(user);
      setLoading(false);
    });
  }, []);
  if (loading) return <div>loading</div>;
  return <>{children}</>;
};

export default Startup;

and this component is placed in

ReactDOM.render(
  <RecoilRoot>
    <BrowserRouter>
        <Startup>
          <App />
        </Startup>
    </BrowserRouter>
  </RecoilRoot>,
  document.getElementById("root")
);

I'm trying to get the current user information before the app loads so that I can keep the track of the user whether the user is logged in or not. But the app gets stuck at loading and I get this error on console.

Can anybody help here?

[mondaychen]

what's the type User? does it contain some special data structure?

[thegauravthakur]

Found the issue. The user was a firebase user object and it seems to be quite large for recoil. When I tried to just save some part of the user after destructuring it, it worked. Does that mean we can't save large JSON data?

[mondaychen]

It's more likely user contains some objects that's not plain JSON. You can probably test with Object.freeze(user) yourself