this.props.children not re-rendered on parent state change

Question

I have a piece of code

import React, {Component} from \'react\';

class App extends Component {
  render() {
    return (
      
        <         


        

Answer 1

The 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 = () => 
Hi
;