🔖

Reactで無限ループ書いちゃってました(反省)

2021/04/11に公開

TL;DR

useEffect の第二引数の値を useEffect で変更していた

何が起きたのか?

眠気と Firebase の仕様と戦いながら完成させたコードがバグってました(私物のプロダクトです)

const authUser = useContext(AuthUserContext);
const [user, setUser] = useState<User | null | undefined>(undefined);
useEffect(() => {
  if (authUser === undefined || authUser === null) {
    setUser(null);
  } else {
    getUserById(authUser.uid).then(setUser);
  }
}, [authUser, user]);

useEffect の中で setUser して、その度に user が変わるから...
Firebase に数千アクセスをしていることに気づいたので危うくリリース前に気づけました。

これ普通にハマるのでは?

あってた。同じことをやってる人がいました。
https://stackoverflow.com/questions/62289414/stop-infinite-loop-on-useeffect-using-firebase

再発防止

正直なところわからん
クライアントアプリの異常検知ツールが欲しいです。

GitHubで編集を提案

Discussion