UseEffect вызывается несколько раз
Я получаю список серий из базы данных MySQL, используя Express API. Я проверил журналы Express и увидел, что запрос сделан 2 раза. Я записал в консоль компонент реагирования и перехватчик useEffect и увидел, что сам компонент отображается 5-6 раз, а useEffect — 2 раза (на основе результатов журнала консоли в браузере Chrome). Что я делаю не так? Вот мой код:
import React, { useState, useEffect } from 'react';
import { useDispatch, useSelector } from "react-redux";
import { fetchSeries } from '../../Redux/Actions/SeriesActions';
const MyList = () => {
const [isSeriesOpen, setIsSeriesOpen] = useState(false);
const dispatch = useDispatch();
const series = useSelector((state) => state.seriesList.series);
const userId = useSelector((state) => state.auth.user_id);
const companyId = 3;
console.info("Log from the component");
useEffect(() => {
dispatch(fetchSeries(userId, companyId));
console.info("Log for Effect called");
}, [dispatch]);
return (
<div>
<p> Test Content</p>
</div>
);
};
export default MyList;
Я попытался проверить, есть ли что-нибудь, вызывающее повторную визуализацию компонента. Компонент импортируется в Routes, который импортируется в App.js, который импортируется в index.js. Но это нормальная структура для React, не так ли? Я не понимаю, почему useEffect вызывается 2 раза и, следовательно, к API делается 2 запроса, в результате чего он запускает запрос к базе данных 2 раза.
Ответы 1
React выполняет рендеринг дважды во время разработки.
Видеть:
« Строгий режим не может автоматически обнаруживать побочные эффекты, но это может помочь вам обнаружить их, сделав их немного более детерминированными. Это делается путем намеренного двойного вызова следующих функций: Конструктор компонента класса, рендеринг и mustComponentUpdate методы».
Источник: React Docs: строгий режим
Кроме того, вам следует добавить все переменные, которые используются внутри useEffect, в массив зависимостей в конце.
useEffect(() => {
dispatch(fetchSeries(userId, companyId));
console.info("Log for Effect called");
}, [dispatch, userId, companyId]);
Насколько я понимаю, useEffect будет выполняться каждый раз при вызове отправки, и поэтому я указал только зависимость отправки. userId и CompanyId никогда не подлежат изменению. Нужно ли мне еще включать их в массив зависимостей?
В процессе разработки (если вы используете строгий режим и >=v18) каждый компонент будет монтироваться, размонтироваться и снова монтироваться при первом рендеринге, чтобы среди прочего проверить неправильное использование перехватчиков. Это немного удивительно и раздражает, но это также описано в их документации.