Как правильно использовать hook useEffect?

Question

[Juniorrrrr]

Доброго времени суток. Часто приходится писать хуки подобно этому

useEffect(() => {
      dispatch(
        someAction({ ...params, anotherParams, page}),
      )
  }, []);

И к примеру необходимо задиспатчить экшн лишь единожды при монтировании компонента и всё как бы работает, но линтер начинает ругаться мол вставь в зависимости params, anotherParams, page и dispatch и естественно если это сделать , то начинается боль.
На классах в этом плане было проще писать код.


Подскажите опытные люди, как вы решаете такие моменты ?

Comments

[lloydbanks]

но линтер начинает ругаться мол вставь в зависимости и естественно если это сделать , то начинается боль.

А какая боль - вам я конечно же не скажу

[Gimir]

Это же официальная практика нет?

[kulaeff]

Если вы не используете connect из React Redux, то вам надо использовать useDispatch оттуда же.

[profesor08]

Подскажите опытные люди, как вы решаете такие моменты?

Не использую redux

[Макс]

Да, их нужно прописывать вторым аргументом. Допустим один из параметров для компонента изменит свое значение. Как компонент поймет что нужно снова делать диспатч экшена?
Если экшен не динамический, его можно не указывать. На диспатч скорее всего ссылка тоже не поменяется, но кто знает

Answer 1

[profesor08]

Во первых, useEffect сработает всегда, при рендере компонента. Обновилс просы или стейт, и будь уверен, useEffect будет вызван. Это значит, что тебе надо ввести внутренний стейт для компонента, обозначающий, что он отобразился.

const Comp = () => {
  const [ready, setReady] = useState(false);
  const dispatch = useDispatch();

  useEffect(() => {
    if (ready === false) { // после отображения элемента будет вызвана функция, `ready` все еще будет `false`, поэтому выполнив свой код, надо вручную задать ей true, чтоб код не вызывался дважды.
      dispatch({ type: 'increment-counter' });
      setReady(true);
    }
  });
};

В ошибке тебя просят убрать `[]` из вызова useEffect

Как использовать хуки в redux написано тут, с примерами:
https://react-redux.js.org/next/api/hooks

Comments

[Макс]

Как это всегда при рендере компонента? Пустой массив вторым аргументом как раз таки передают для того, чтобы useEffect отработал как componentDidMount, подробнее тут: https://reactjs.org/docs/hooks-effect.html#tip-opt... Не вводите людей в заблуждение

[profesor08]

Максим, Вторым аргументов передается список зависимостей, при изменении который будет вызвана useEffect функция после обновления компонента. Если зависимостей ноль, то вызовется после первого рендера и все.

[Макс]

profesor08, это не так. Потыкайте кнопку в демке: https://codesandbox.io/s/weathered-microservice-mfffm Там вроде все просто и понятно и очевидно сколько раз вызывается useEffect без второго аргумента

[profesor08]

Максим, что значит не так? Все так как в документации написано и пример подтверждает. Под нулем зависимостей я подразумеваю переданный пустой массив, где ноль элементов, а не отсутствие второго аргумента.

[Макс]

profesor08, смапил ваш "ноль зависимостей" с тем что написано в ответе и пример компонента, подумал это значит отсутствие второго аргумента. Хорошо что удалось прояснить

[Aleksandr Ataakgayev]

Юзайте класс компоненты)))

[profesor08]

Aleksandr Ataakgayev, зачем?

[Aleksandr Ataakgayev]

profesor08, честно скажу, что мне как ООП-шнику гораздо удобнее использовать именно класс компоненты чем функциональные. Функциональные если и юзаю, то они совсем "тупые". Там же и тайпскрипт, и интерфейсы и прочее.

[profesor08]

Aleksandr Ataakgayev, писать на треть больше кода, который не несет никакой функциональности, а просто бойлерплейт, и так с каждым компонентом, это то, что я терпеть не мог. В этом плане хуки это свежий глоток воздуха. И ООП никуда не девается, повсюду объекты.

[Aleksandr Ataakgayev]

profesor08, когда хуки (useState к примеру) превышают количество в пять в одной компоненте, то начинается самая настоящая головная боль. Не встречались с таким?

[profesor08]

Aleksandr Ataakgayev, если обновляются по отдельности то, то никакой боли нет. Если по несколько подряд, то лучше объединить все это дело в один объект, чтоб избежать ненужных рендеров. Ведь даже в классовых компонентах, не пишешь же `this.setState({a: true}); this.setState({b: true})`, а пишешь `this.setState({a: true, b: true})`

[Aleksandr Ataakgayev]

profesor08, спасибо. Поэкспериментирую