Могу ли я использовать крючки React внутри условного?

Нет.

Я не знаю почему технически, но это невозможно.

Я наткнулся на это во время работы с SWR и, в частности, в используйте SWR крюк.

const ({ data } = useSWR(`/api/user`, fetcher)

Я хотел получить некоторые данные из API только тогда, когда пользователь вошел в систему, и я подумал: “Хорошо, я могу это сделать”.:

let data

if (loggedIn) {
  ;({ data } = useSWR(`/api/user`, fetcher)
}

но… нет.

Реакция вызовет ошибки в консоли, возможно, ошибку, которая гласит:

Предупреждение: React обнаружил изменение порядка крючков, вызываемых курсом. Это приведет к ошибкам и ошибкам, если их не исправить.

Решение будет отличаться в зависимости от используемого крючка. В этом случае очень быстрое и эффективное решение было предоставлено используйте SWR крюк, потому что я мог бы передать null вместо конечной точки API, чтобы избежать загрузки данных:

const ({ data } = useSWR(loggedIn ? `/api/user` : null, fetcher)

Я переместил условный внутрь вызова крючка, и это заставило его работать на меня.

Оригинал: “https://flaviocopes.com/react-hooks-conditionals/”