Why is the component rendered 4 times?

Question

React

There is such hoc component:

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;

Console:


Judging by the console, the component is rendered 4 times... Why is that?

Answer 1

The reason is React.StrictMode, if you remove it, then there will be 2 renders, as it should be.
Read more here

Answer 2

If the component was rendered 4 times, there would be 4 console.log('withData'), otherwise deal with the function itself that you return.