@cloudz

Можно ли не указывать функцию полченную из хука в зависимостях useEffect?

Есть кастомный хук

const { doSomething } = useDoSomething()

и есть useEffect который использует этот хук

useEffect(() => {
  doSomething({ type: 'run' })
}, [])


eslint правило eact-hooks/exhaustive-deps, говорит о том что нужно внести этот коллбек в зависисимости.
Но зачем, если он никак не зависит от пропсов или стейта и не меняется?

В документации реакта написано что функции можно заносить в сам эффект или оборачивать в useCallback.
https://ru.reactjs.org/docs/hooks-faq.html#is-it-s...

Однако тут это функция полученная из хука и для нее такое делать излишне.
Это упущение в плагине и он ругается не по делу? как поступать?
  • Вопрос задан
  • 143 просмотра
Пригласить эксперта
Ответы на вопрос 4
Alexandroppolus
@Alexandroppolus
кодир
Перепиши кастомный хук таким образом, чтобы он возвращал постоянную функцию. Да, с тем же useCallback. Если этот хук не зависит от пропсов/стейта, то очевидно, функция должна быть постоянной.
Ответ написан
@antares4045
Варнинги на то и варнинги, что система не уверена, что вы написали не то, что имели в виду.
useEffect без зависимостей выполнится при первом рендере компонента и всё; если же вы добавите что-то в зависимость (не doSomething), то калбек будет выполняться при каждом изменении зависимостей, НО doSomething будет использоваться из первого рендера, что с высокой вероятностью будет приводить к ошибкам. Именно по этой логике линтер действует по принципу: всё что используется в хуке, должно быть указано в зависимостях. И это отлично работает, пока все контрибюторы проекта в адеквате, код не раздулся до десятков (а то и сотен) тысяч строк и лично вы можете быть уверены, что функция doSomething действительно обновляется только в случае когда её нужно перевызвать (тоесть не обновляется).
Могу вам гарантировать, что если в прокте больше двух человек, и вы работаете над ним суммарно больше десяти тысяч часов чистого времени, то у вас в проекте обязательно что-то отвалится, из-за того, что в зависимостях прописали что-то, что линтер просил, но там быть не должно. Но и по обратной причние тоже. Конкретно в вашем случае лучше расширять список зависимостей не стоит. но каждый раз при написании/изменении хука надо думать отдельно.
Ответ написан
Raxen
@Raxen
Senior Frontend Developer, X5 Retail Group
Расскажу один кейс, был у меня компонент, с хуками, все модно, один из сторонних хуков использовался в useEffect и постоянно менял свое состояние, что вызывало ререндер, по правилам eslint он должен был быть указан в deps, но при указании, приложение уходило в бесконечную перезагрузку.
Указав в комментарии eslint что тут я сам решаю, что добавлять - избавился от проблемы.

// eslint-disable-next-line react-hooks/exhaustive-deps
Ответ написан
Aetae
@Aetae
Тлен
Заведи для таких случаев свой хук, типа:
const useMounted = (callback) => useEffect(callback, []);
Это не устранит корень проблемы, но в данном конкретном случае самое то.

А так, все правила в eslint работают по принципу: лучше перебдеть чем недобдеть. Они не могут знать точно ли ты хотел вызвать хук один раз или может-всё таки вызывать его каждый раз когда используемая зависимость(doSomething) меняется.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы