reactjs - コンポーネントがまだレンダリングされていると想定されている場合でも、React props が評価されています。

Question

次のように、コンポーネントの読み込みが完了するまでレンダリングしないようにコンポーネントに指示するラッパーがあります。

import React from 'react';
import LoadingSpinner from 'vivid.react.components/atoms/LoadingSpinner';

class Wrapper extends React.Component {
    componentDidMount() {
        this.props.getInitialState();
    }

    render() {
        const { error, isLoadingInitialState } = this.props;
        return (
            <div className='wrapper'>
                {!!error && <div>Error: {error.message}</div>}
                {isLoadingInitialState
                    ? <LoadingSpinner/>
                    :  children
                }
            </div>
        )
    }
};

export default Wrapper;

ただし、Context Consumer 内でこのラッパーを使用すると、LoadingInitialState が true で、子がレンダリングされない場合でも、子の props がまだ評価されています。

const Screen = () => {
    <div>
     <Context.Consumer>
      {(context) => {
          <Wrapper isLoadingInitialState={context.isLoadingInitialState} getInitialState={context.getInitialState)>
            <ChildComponent price = {context.data.props}/> // throws an error because data is undefined
          </Wrapper>
      }}
    </Context.Context>
}

レンダリングされていないにもかかわらず、ChildComponents の小道具がまだ評価されている理由を誰でも説明できますか? これを行うためのより良い解決策はありますか?