13

I have a piece of code

import React, {Component} from 'react';

class App extends Component {
  render() {
    return (
      <Container>
        <Child/>
      </Container>
    )
  }
}

class Container extends Component {
  render() {
    console.log('Container render');
    return (
      <div onClick={() => this.setState({})}>
        {this.props.children}
      </div>
    )
  }
}

class Child extends Component {
  render() {
    console.log('Child render');
    return <h1>Hi</h1>
  }
}

export default App;

When clicking on 'Hi' msg, only Container component keeps re-rendering but Child component is not re-rendered.

Why is Child component not re-rendered on Container state change?

I would reason, that it doesn't happen due to it being a property of Container component, but still this.props.child is evaluated to a Child component in JSX, so not sure.

<div onClick={() => this.setState({})}>
  {this.props.children}
</div>

Full example https://codesandbox.io/s/529lq0rv2n (check console log)

3 Answers 3

20

The question is quite old, but since you didn't seem to get a satisfying answer I'll give it a shot too.

As you have observed by yourself, changing

// Scenario A

<div onClick={() => this.setState({})}>
  {this.props.children}
</div>

to

// Scenario B

<div onClick={() => this.setState({})}>
  <Child />
</div>

will in fact, end up with

Container render
Child render

in the console, every time you click.

Now, to quote you

As fas as I understand, if setState() is triggered, render function of Container component is called and all child elements should be re-rendered.

You seemed to be very close to understanding what is happening here.

So far, you are correct, since the Container's render is executed, so must the components returned from it call their own render methods.

Now, as you also said, correctly,

<Child />

// is equal to

React.createElement(Child, {/*props*/}, /*children*/)

In essence, what you get from the above is just an object describing what to show on the screen, a React Element.

The key here is to understand when the React.createElement(Child, {/*props*/}, /*children*/) execution happened, in each of the scenarios above.

So let's see what is happening:

class App extends Component {
  render() {
    return (
      <Container>
        <Child/>
      </Container>
    )
  }
}

class Container extends Component {
  render() {
    console.log('Container render');
    return (
      <div onClick={() => this.setState({})}>
        {this.props.children}
      </div>
    )
  }
}

class Child extends Component {
  render() {
    console.log('Child render');
    return <h1>Hi</h1>
  }
}

You can rewrite the return value of App like this:

<Container>
  <Child/>
</Container>

// is equal to

React.createElement(
  Container, 
  {}, 
  React.createElement(
    Child, 
    {}, 
    {}
  )
)

// which is equal to a React Element object, something like

{
  type: Container,
  props: {
    children: {
      type: Child,    // |
      props: {},      // +---> Take note of this object here
      children: {}    // |
    }
  }
}

And you can also rewrite the return value of Container like this:

<div onClick={() => this.setState({})}>
  {this.props.children}
</div>

// is equal to

React.createElement(
  'div', 
  {onClick: () => this.setState({})}, 
  this.props.children
)

// which is equal to React Element

{
  type: 'div',
  props: {
    children: this.props.children
  }
}

Now, this.props.children is the same thing as the one included in the App's returned React Element:

{
  type: Child,
  props: {},
  children: {}
}

And to be exact, these two things are referentially the same, meaning it's the exact same thing in memory, in both cases.

Now, no matter how many times Container get's re-rendered, since its children are always referentially the same thing between renders (because that React Element was created in the App level and it has no reason to change), they don't get re-rendered.

In short, React doesn't bother to render a React Element again if it is referentially (===) equal to what it was in the previous render.

Now, if you were to change the Container you would have:

<div onClick={() => this.setState({})}>
  <Child />
</div>

// is equal to

React.createElement(
  'div', 
  {onClick: () => this.setState({})}, 
  React.createElement(
    Child, 
    {}, 
    {}
  ) 
)

// which is equal to

{
  type: 'div',
  props: {
    children: {
      type: Child,
      props: {},
      children: {}
    }
  }
}

However in this case, if you were to re-render Container, it will have to re-execute

React.createElement(
  Child, 
  {}, 
  {}
)

for every render. This will result in React Elements that are referentially different between renders, so React will actually re-render the Child component as well, even though the end result will be the same.

Reference

3
  • Great explanation! Replacing "return this.props.children" with "return React.Children.map(this.props.children, child=>React.isValidElement(child) ? React.cloneElement(child) : child)" forced my children to render on parent state update.
    – brunettdan
    Mar 21, 2021 at 0:13
  • just curious, if we use this component composition, and assume we will have not only one child component, what will happen? I experimented hereexample. this was as expected. But this one. we have a child component bubbling up event, and we update state in the input field parent compoennt, and the child component button is always rendered. shouldn't that be the same reference every time and react jsut skip? Nov 3, 2021 at 20:49
  • I think you have accidentally posted the same link twice, it's the one you say it always renders the children. That's because, you have lifted the state up, to the level of the App component. If its state changes it has to re execute the function (render) of everything that it returns. So, every time you type something, its state gets updated so the Inputfield and the Button get rerendered every time. Try moving the state in the Inputfield component and see what happens :) (codesandbox.io/s/twilight-hooks-m65l7?file=/src/index.js) Nov 4, 2021 at 22:00
1

The <Child /> component is not re-rendered because the props have not changed. React uses the concept of Virtual DOM which is a representation of your components and their data.

If the props of a component do not change the component is not re-rendered. This is what keeps React fast.

In you example there are no props sent down to Child, so it will never be re-rendered. If you want it to re-render each time (why would you ?), you can for example use a pure function

const Child = () => <h1>Hi</h1>;
3
  • Thank you for your answer. As fas as I understand, if setState() is triggered, render function of Container component is called and all child elements should be re-rendered. I could use <Child/> instead of {this.props.children} and re-render will be done each time, even there are no props to update. Check example Nov 30, 2017 at 7:22
  • 4
    <Child /> is rendered by App, That's why it won't be re-rendered when Container is rendered. All your Container does - it just returns the passed value. You can trigger the re-rendering by doing React.cloneElement(this.props.children)
    – torvin
    Nov 30, 2017 at 9:11
  • I thought so at the beginning, but how would you explain initial rendering then? When app is initially mounted Child is rendered after Container is rendered (see console log). If Child was rendered in an App, "Child rendered" should appear before "Container rendered" during initial mount, should't it? Nov 30, 2017 at 11:07
1

Change {this.props.children} to <Child /> in Container component, (now you can remove <Child /> from App component).

If you are clicking the div you will get both the 'Child render' and 'Container render' in console.

(In this example your child is static component. Then there is no point for the re-rendering.)

3
  • Yes, I am aware of case when <Child /> is used instead of {this.props.children}. Still don't see the difference in JSX as this.props.children will return the same <Child/> element. Could you please elaborate more what you mean by saying your child is static component ? Nov 30, 2017 at 7:30
  • The Child component content is static (The content is not going to change any time). In this case no need of re-rendering the component. But your Child needs to be re-rendered if you are using some values which you will get from Container component, passed through props, and that is going to change by the time.
    – Madhavan.V
    Nov 30, 2017 at 7:36
  • 1
    Thanks for elaboration. Yes we can call it a static one. It still doesn't explain why when used as a <Child/> instead of {this.props.children} it will be re-rendered each time. Check the example Nov 30, 2017 at 7:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.