Задать вопрос
@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...

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

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

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

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

Похожие вопросы
ITK academy Нижний Новгород
от 80 000 до 120 000 ₽
ITK academy Воронеж
от 50 000 до 90 000 ₽