Why respond to call functions in a subcomponent event when these subcomponents are not displayed?

Question

Here is an example

const getResult = () => { document.getElementById('logger').innerHTML += "FUNCTION CALLs immediately"; return 'RESULT string AFTER 3S'; } const A = () => { return ( <Wrapper> {getResult()} </Wrapper> ); }; class Wrapper extends React.Component { constructor() { super(); this.state = { active: false } } componentDidMount() { setTimeout(() => this.setState({ active: true }), 3000); } render() { return ( <div> {this.state.active && this.props.children} </div> ); } } ReactDOM.render(<A />, document.getElementById('app')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="logger"></div> <div id="app"></div> 

The question is: why does the getResult function call immediately? The children component in Wrapper should display after 3 seconds. But calling the function immediately. Why is that?

Answer 1

Technically, you call a function, and React treats the result of this function as children - RESULT string AFTER 3S . If you want to defer a function call, you can activate it when the state changes.

 const getResult = () => { document.getElementById('logger').innerHTML += "FUNCTION CALLs immediately"; return 'RESULT string AFTER 3S'; } const A = () => { return ( <Wrapper> {getResult} // remove immediate invocation </Wrapper> ); }; class Wrapper extends React.Component { ... render() { return ( <div> // here we can invoke children as a function, because we pass a function {this.state.active && this.props.children()} </div> ); } } 

Then you get the expected result. Worked example

Answer 2

Since, when the parser reads your file and executes it, component A immediately executed (and thereby launches the contents of the getResult function), but its result ( return ) is displayed only after a timeout.

Technically, you already have in this.props.children contents of return from getResult on the first render, but you only show it after 3 seconds.

I do not know if this is clear, it is not easy for me to explain this in English.

If you want to call only the code in the render, you must put it in the return .

Answer 3

Even if children in your Child components are displayed after 3 seconds, but the getResult function is evaluated in the parent. when the parent does.

The component rendering function of the Wrapper is called after the application components and remembers that the getResults function is executed by the parent component of the App, not the Wrapper. This is not a Children's component that dynamically evaluates props for children when they need it, but the Parent evaluates it and passes it on to the child. A child may or may not immediately use it.

Answer 4

The previous answers make sense, I just want to add that your code is written this way when the child function fires twice ! The first time you execute function A and the second time when the state is active and the shell calls it again.

Check link , I proved it here. Hope this helps you understand what is happening.