Нужен совет по хукам от опытных их пользователей :)
Вот реализация простого примера на классах. При монтировании компонента сделать запрос данных и потом делать запрос когда дочерний компонент попросит (простая лента, подгружающая данные при прокрутке)
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, что я просто уже не понимаю как это будет работать и вряд ли кто-то еще поймет если это увидит.
Как с этим бороться?