RecoilJs is freezing the UI

Question

I'm using recoil Js for my project and 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);
    });
  }, [setCurrentUser]);
  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 user is logged in or not. But the app gets stuck at loading and I get this error on console.

Answer 1

I was trying to store the firebase auth user object which contains all the information related to the current user. There could be two reasons for screen freezing of recoil while saving the user object.

1. User object was not a JSON object.
2. User object might be too big.

My issue got solved when I tried to save just specific information from the object like id and email. When I saved just specific information, there was no more freezing.