RecoilJs 正在冻结 UI答案

【问题标题】：RecoilJs is freezing the UIRecoilJs 正在冻结 UI
【发布时间】：2021-01-28 14:23:33
【问题描述】：

我正在为我的项目使用反冲 Js，我有一个原子

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

我正在使用它

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;

这个组件被放置在

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

我试图在应用加载之前获取当前用户信息，以便我可以跟踪用户是否登录。但是应用程序在加载时卡住了，我在控制台上收到了这个错误。

【问题讨论】：

hmm 你认为setCurrentUser 需要作为useEffect 中的依赖项，因为它声明setter 并且它的签名永远不会改变，所以可以尝试删除它并检查
对不起，我忘了删除它，但我所说的问题与它无关
用户对象结构是什么？
firebase 用户对象
如果codesandbox中的示例代码很好。

标签： reactjs react-state-management recoiljs

【解决方案1】：

我试图存储包含与当前用户相关的所有信息的 firebase auth 用户对象。保存用户对象时，屏幕冻结可能有两个原因。

用户对象不是 JSON 对象。
用户对象可能太大。

当我尝试仅保存对象中的特定信息（如 id 和电子邮件）时，我的问题得到了解决。当我只保存特定信息时，不再冻结。

【讨论】：