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

Question

[Vlad Osadchyi]

Есть такой 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;

Консоль:


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

Answer 1

[Vlad Osadchyi]

Причина в React.StrictMode, если его убрать, то будет 2 рендеринга, как и должно быть.
Подробнее здесь

Answer 2

[historydev]

Если бы компонент рендерился 4 раза, было бы 4 console.log('withData'), а так разбирайтесь с самой функцией которую возвращаете.

Comments

[Vlad Osadchyi]

Вы не правы