React props are being evaluated even if the component is still suppose to be rendered

I have a wrapper for my components that tells them not to render until they are done loading that looks like this

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 (


{!!error &&

Error: {error.message}

}
{isLoadingInitialState
? <LoadingSpinner/>
: children
}
</div>
)
}
};

export default Wrapper;

However, when I used this wrapper inside a Context Consumer, the props of the children are still being evaluated even if the LoadingInitialState is true and the children is not supposed to render.

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>
}

Can anyone explain why the ChildComponents props are still being evaulated even thought its not being rendered? Is there a better solution to do this?

Is this the complete code of Wrapper? What is the initial value of isLoadingInitialState ?
– trixn
Jun 29 at 18:32

Wrapper

isLoadingInitialState

I suppose that initial value of isLoadingInitialState equals undefined.
– Maciej Wojsław
Jun 29 at 19:27

Sorry, i fixed the code. The initial value of isLoadingInitialState is set as true in the parent of Screen and passed down through the context. The issue is that the value of the props of ChildComponent are being evaluated before the render method of Wrapper and i have no idea why
– Yucheng Lin
Jun 29 at 19:37

@ Yucheng Lin is there a better solution to do this - you can try with HigherOrderComponent. check it out medium.com/@Farzad_YZ/…
– Aravind S
Jun 29 at 19:41

@AravindS I will take a look at that article. Do you know why this doesnt work though?
– Yucheng Lin
Jun 29 at 20:16

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.