простого примера на классах. При монтировании компонента сделать запрос данных и потом делать запрос когда дочерний компонент попросит (простая лента, подгружающая данные при прокрутке)
class Parent extends React.Component {
componentDidMount() {
this.getData();
}
getData = () => {
...
}
render() {
return (
<Child
onButtonPress={this.getData}
/>
);
}
}
Пытаюсь переделать на функции и хуки.
export function Parent() {
const getData = () => {
...
};
useEffect(() => {
getData();
}, []);
return (
<Child
onButtonPress={getData}
/>
);
}
Вроде, согласно документации должно работать. Но в реальности я получаю замечание
Either include it or remove the dependency array.(react-hooks/exhaustive-dep
Если начать исправлять его, то происходит жуткая содомия: в useEffect добавляется зависимость от функции getData и я теперь не уверен что он сработает один раз при первом рендере, а функция getData оборачивается в useCallback и получает такое количество зависимостей в массив deps, что я просто уже не понимаю как это будет работать и вряд ли кто-то еще поймет если это увидит.
Как с этим бороться?
Если ты уверен, что все правильно, то можно отключить здесь exhaustive-deps
Рекомендуется это правило не отключать, но я так часто сталкиваюсь с проблемами при его использовании, что появилось ощущение, что я чего-то не понимаю. Вот еще пример: https://stackoverflow.com/questions/56992052/how-to-fix-a-react-hooks-exhaustive-deps-linting-error-with-no-dependency Там предлагается сделать так: useEffect(() => () => clearMessages(), [clearMessages]) Вот когда это было так useEffect(() => () => clearMessages(), []) Я смотрю в код и вижу что функция выполнится один раз. А когда в зависимости попадает что-то, я вынужден анализировать весь перечень зависимостей чтобы понять как это будет работать. И потом весело будет наткнуться на тот факт, что зависимости не меняются никогда и они просто там добавлены чтобы линтер заткнулся.
> Рекомендуется это правило не отключать Его спокойно можно отключать, если ты понимаешь последствия. Например, тебе нужно, чтобы эффект выполнился строго один раз. Вполне можно отключить, если это действительно так
Это ужасный совет useEffect(() => () => clearMessages(), [clearMessages]) с большей долей вероятности приведет к некорректному поведению
спасибо. очень много непонятно с этими хуками. причем одним из аргументов при их введении было "С классами сложно разобраться" :))
С классами сложно было делать простые вещи. С хуками - просто. Но если делать сложные вещи, то появляются новые проблемы
Обсуждают сегодня