Задать вопрос
VladOsadchyi
@VladOsadchyi
Студент

Почему компонент рендерится 4 раза?

Есть такой hoc компонент:
import React, {useEffect, useState} from "react";

const withData = (WrappedComponent) => {
    console.log('withData')
    return (props) => {
        const [state, setState] = useState({
            data: [],
            loading: true,
            error: null,
        });

        useEffect(() => {
            props.getData()
                .then(data => {
                    setState({
                        data: data,
                        loading: false,
                        error: null,
                    })
                })
                .catch(error => {
                    setState({
                        data: [],
                        loading: false,
                        error: error,
                    })
                })
        }, []);

        console.log(props, state);

        return state.loading
            ? <span>Loading</span>
            : state.error
                ? <span>{state.error}</span>
                : <WrappedComponent {...props} data={state.data}/>
    };
};

export default withData;


Консоль:
5e9cbd4b1691c490814899.png

Судя по консоли, компонент рендерится 4 раза... Почему так?
  • Вопрос задан
  • 489 просмотров
Подписаться 1 Простой Комментировать
Решения вопроса 1
VladOsadchyi
@VladOsadchyi Автор вопроса
Студент
Причина в React.StrictMode, если его убрать, то будет 2 рендеринга, как и должно быть.
Подробнее здесь
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

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