Ревью React-компонента с условным hook

Условие

Компонент выполняет if (!user) return null, а ниже вызывает useState и useEffect. При появлении user возникают ошибки hooks. Как исправить структуру?

Ответ

Hooks должны вызываться в одном порядке на верхнем уровне компонента. Перенесите условный возврат ниже hooks либо выделите отдельный компонент для ветки с пользователем.

Во втором варианте родитель делает return user ? <UserPanel user={user} /> : null, а UserPanel безусловно вызывает свои hooks. Эффект внутри него должен корректно очищаться при размонтировании. Проверьте также, не запускаются ли запросы из render и не мутируются ли props: это независимые нарушения, которые один перенос if не исправит.