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

Question

[Артур]

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

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...

Однако тут это функция полученная из хука и для нее такое делать излишне.
Это упущение в плагине и он ругается не по делу? как поступать?

Comments

[WbICHA]

Однако тут это функция полученная из хука и для нее такое делать излишне.

И почему же?

[Aetae]

WbICHA, из хука или нет - действительно не важно.(хотя неплохо было бы иметь возможность пометить для правила свои хуки которые возвращают гарантированное неизменное значение, типа useState), но в данном конкретном случае useEffect, очевидно, одноразовый и совершенно не важно поменяется ли функция или нет.

[WbICHA]

но в данном конкретном случае useEffect, очевидно, одноразовый

Aetae, я дико извиняюсь, но как ты это вообще понял?) Тут же даже полноценного кода нет, да даже неполноценного.)

[Aetae]

WbICHA, ну а зачем ещё нужен useEffect с пустым массивом? Или ты согласен с eslint, что Артур мог таки желать, чтоб useEffect срабатывал при каждом обновлении doSomething? Я нахожу это крайне сомнительным.

[WbICHA]

Aetae, для меня крайне сомнительным является вызов функции, которая может измениться в любой момент, только при загрузке компонента.

[Alexandroppolus]

Aetae, автор написал, что функция постоянная, то есть по факту проблемы нет.

[Aetae]

WbICHA, ну почему-же. Это может добавить приятный компонент сюрприза: когда при одной загрузке страницы всё работает, и при другой - нет.)

[WbICHA]

Alexandroppolus, ты всегда веришь тому, что пишут авторы?) Тем более, когда речь идёт о "чужом" хуке.)

[Alexandroppolus]

WbICHA, ну а смысл не верить? ) Есть вопрос, есть соответствующий этому вопросу ответ. Автор мог ошибиться где угодно при формулировке вопроса, но это никого не волнует.

Answer 1

[Alexandroppolus]

Перепиши кастомный хук таким образом, чтобы он возвращал постоянную функцию. Да, с тем же useCallback. Если этот хук не зависит от пропсов/стейта, то очевидно, функция должна быть постоянной.

Comments

[Артур]

кастомный хук не мой, использую вендора

[Alexandroppolus]

Артур, не сразу заметил в тексте вопроса:

он никак не зависит от пропсов или стейта и не меняется?

Если он действительно не меняется (хук написан правильно), то просто добавь в зависимости, и всё. Будет только один вызов эффекта.

Answer 2

[antares4045]

Варнинги на то и варнинги, что система не уверена, что вы написали не то, что имели в виду.
useEffect без зависимостей выполнится при первом рендере компонента и всё; если же вы добавите что-то в зависимость (не doSomething), то калбек будет выполняться при каждом изменении зависимостей, НО doSomething будет использоваться из первого рендера, что с высокой вероятностью будет приводить к ошибкам. Именно по этой логике линтер действует по принципу: всё что используется в хуке, должно быть указано в зависимостях. И это отлично работает, пока все контрибюторы проекта в адеквате, код не раздулся до десятков (а то и сотен) тысяч строк и лично вы можете быть уверены, что функция doSomething действительно обновляется только в случае когда её нужно перевызвать (тоесть не обновляется).
Могу вам гарантировать, что если в прокте больше двух человек, и вы работаете над ним суммарно больше десяти тысяч часов чистого времени, то у вас в проекте обязательно что-то отвалится, из-за того, что в зависимостях прописали что-то, что линтер просил, но там быть не должно. Но и по обратной причние тоже. Конкретно в вашем случае лучше расширять список зависимостей не стоит. но каждый раз при написании/изменении хука надо думать отдельно.

Comments

[Артур]

понятно, значит придется покрывать комментариями такие излишние участки

Answer 3

[Роман Дворянов]

Расскажу один кейс, был у меня компонент, с хуками, все модно, один из сторонних хуков использовался в useEffect и постоянно менял свое состояние, что вызывало ререндер, по правилам eslint он должен был быть указан в deps, но при указании, приложение уходило в бесконечную перезагрузку.
Указав в комментарии eslint что тут я сам решаю, что добавлять - избавился от проблемы.

// eslint-disable-next-line react-hooks/exhaustive-deps

Comments

[Alexandroppolus]

Возможно, там был "производный стейт", который следовало заменить на вычисляемое значение (при необходимости обернув в useMemo)

[Артур]

мы в проекте используем это правило только как warn, для индикации возможных проблем.

Как показала практика, полностью отключив правило мы закрываем возможность понять почему мы его отключаем, поэтому лучше оставлю информирующий коммент)

Answer 4

[Aetae]

Заведи для таких случаев свой хук, типа:

const useMounted = (callback) => useEffect(callback, []);

Это не устранит корень проблемы, но в данном конкретном случае самое то.

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