React. При отправке axios-запросов компонент ререндерится слишком много раз (или нет)?

Question

[pomogitepjsreactom]

React. При отправке axios-запросов компонент ререндерится слишком много раз (или нет).

использую следующий код:

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('127.0.0.1:8000/api/v1/lessons');

setData(response.data);
} catch (error) {
console.log(error);
setError(error);
}
}, []); //

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

console.log(data)

return(...)

НЕ используя strictmode, ожидаемо получаю в консоль null, затем массив.
Если его вернуть - получаю следующую картину:

Т.е. 2 вывода null, 4 вывода массива.
Должно ли так быть и если да, то почему?

Answer 1

[Alexandroppolus]

попробуй обернуть в React.memo

const Main = React.memo(() => { ... });