В React, когда я отправляю Axios-запросы, происходит слишком много перерисовок компонента. Это нормально или нет?

Question

Александр

javascript , react

В React, когда я отправляю Axios-запросы, происходит слишком много перерисовок компонента. Это нормально или нет?

В React, при отправке axios-запросов, мой компонент перерисовывается слишком много раз (или, возможно, не перерисовывается вообще). Я использую следующий код: 

```javascript
import React from "react";
import './Main.scss';
import { useState, useEffect, useCallback } from "react";
import axios from "axios";

const Main = () => {
    const [data, setData] = useState(null);

    const fetchData = useCallback(async () => {
        try {
            const response = await axios.get(' <a href="http://127.0.0.1:8000/api/v1/lessons" rel="nofollow">127.0.0.1:8000/api/v1/lessons</a> ');
            setData(response.data);
        } catch (error) {
            console.log(error);
            setError(error);
        }
    }, []); 

    useEffect(() => {
        fetchData();
    }, [fetchData]); 

    console.log(data)

    return( ...
    )
};
```

Не используя strict mode, я ожидаемо получаю в консоли `null`, а затем массив. Однако, если я включаю strict mode, то наблюдаю следующую ситуацию:

1 марта 2025 г. 18:14

Ответы на вопрос 2

Похожие вопросы

Answer 1

Ваш код выглядит в целом нормально, однако, когда вы включаете Strict Mode в React (например, в `index.js`), это может привести к тому, что некоторые функции, включая функции эффектов (в данном случае, `fetchData`) и методы жизненного цикла, могут вызываться дважды во время разработки. Это сделано для выявления потенциальных ошибок и проблем с побочными эффектами.

В вашем случае, функция `fetchData` вызывается дважды, поэтому вы видите в консоли два результата: первый - `null` (начальное состояние), а второй - массив (данные, полученные от сервера).

Для решения проблемы перерисовок и minimization of effects, вот несколько рекомендаций:

1. **Проверьте состояние вашего компонента**: Возможно, вы хотели бы использовать дополнительное состояние для обработки ошибок, или состояние загрузки, чтобы правильно отображать пользовательский интерфейс.

2. **Используйте debounce или throttle**: Если `fetchData` вызывается слишком часто (например, по изменению какого-либо состояния), то стоит реализовать debounce или throttle для уменьшения количества запросов.

3. **Правильные ключи в зависимости `useEffect`**: Если у вас есть другие состояния, которые могут их изменять, убедитесь, что они правильно указаны в массиве зависимостей. 

4. **Исполнительный протокол при запросах**: Если вы не хотите, чтобы запрос был выполнен несколько раз, убедитесь, что у вас есть проверка, которая вызывает `fetchData` только в определенных условиях (например, когда компонент монтирован или когда состояние изменяется).

Вот пример, включающий состояние загрузки и обработки ошибок:

```javascript
import React, { useState, useEffect, useCallback } from "react";
import axios from "axios";

const Main = () => {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);

    const fetchData = useCallback(async () => {
        setLoading(true);
        setError(null); // Сброс ошибки
        try {
            const response = await axios.get('http://127.0.0.1:8000/api/v1/lessons');
            setData(response.data);
        } catch (error) {
            console.error(error);
            setError(error);
        } finally {
            setLoading(false);
        }
    }, []); 

    useEffect(() => {
        fetchData();
    }, [fetchData]); 

    if (loading) return <p>Loading...</p>;
    if (error) return <p>Error: {error.message}</p>;
    if (!data) return <p>No data found</p>;

    return (
        /* Ваш JSX для отображения данных */
    );
};

export default Main;
```

Такой подход не только поможет вам избежать лишних перерисовок, но и обеспечит более чистое управление состоянием компонента.

Answer 2

попробуй обернуть в React.memo 
 
 const Main = React.memo(() => { ... });