React Hooks внешний API использует рендеринг данных

Question

Я пытаюсь извлечь данные из внешнего API в мое приложение, работающее на нативном языке. Часть потребления данных работает правильно. Выборка выполняется в компоненте контекста в хуке useEffect. После этого данные необходимо вернуть в мой компонент рендеринга.

Проблема даже в том, что, хотя данные извлекаются правильно, компонент представления отображается перед извлечением данных.

Журнал консоли возвращает состояние не определено

Мой код показан ниже.

Мой контекст

const ProductContextProvider = (props) => {

    const [state, dispatch] = useReducer(productReducer, {});

    useEffect(() => {
        const getProductList = async () => {
            await ApiPublic.get('/products')
                .then(function (response) {
                    dispatch({ type: 'LOAD_PRODUCTS', payload: response.data });
                })
                .catch(function (error) {
                    handleError(error);
                });
        };
        getProductList();
    }, []);

    return (
        <ProductContext.Provider value={state}>
            {props.children}
        </ProductContext.Provider>
    );
}

Мой редуктор

export const productReducer = (state, action) => {
    switch (action.type) {
        case 'LOAD_PRODUCTS':
            return {
                ...action.payload.data,
            };
        default:
            return state;
    }
}

My View Component

const ProductsList = () => {

    const { state } = useContext(ProductContext);

    console.log('state', state);
}