Local storage effect example from documentation can broke react app

[Kein1945]

I've started to learn recoil and tried to create simple app with authentication.

function App() {
    const user = useRecoilValue(userState);

    if(!user) {
      return (
        <Suspense fallback={<div>Loading... </div>}>
            <BrowserRouter>
              <Routes>
                <Route path="/" element={<Homepage />} />
                <Route path="/login" element={<Login />} />
            </Routes>
            </BrowserRouter>
        </Suspense>
        );
    }

export const localStorageEffect = (key: string) => ({ setSelf, onSet }: { setSelf: Function, onSet: Function }) => {
    const savedValue = localStorage.getItem(key)
    if (savedValue != null) {
        setSelf(JSON.parse(savedValue));
    } 
  
    onSet((newValue: any, _: any, isReset: any) => {
      isReset
        ? localStorage.removeItem(key)
        : localStorage.setItem(key, JSON.stringify(newValue));
    });
  };

export const userState = atom<TUser>({
    key: 'user',
    effects: [
        localStorageEffect('user'),
    ]
});

But when I've tried to build application I've got white screen. No errors, No react components. Nothing. I've started to debug line by line and found that my example make atom loadable. When application start renders it's stops after const user = useRecoilValue(userState); and go nowhere. Nothing happens. Because atom become to 'loading' state and nothing is change, because application can't render Login component that responsible to setUser in that case.
I've fixed that by adding else { setSelf(null) } in localStorage example.
I'm not sure is it correct way.
In my case I've set user in component after authorization.
And maybe need to fixed that moment in documentation to avoid spending time in debug for new comers.

[noritheduck]

Hi @Kein1945, have you seen #1345. I think the issues are related.