Wsrtjtyk

I have the following structure:

class Parent extends React.Component {



  componentDidMount() {

    document.addEventListener('keydown', () => {

      this.value++;

    })

  }



  this.value = 0;



  render() {

    return (<ChildComponent value={this.value} />) 

ChildComponent simply renders the value:

class ChildComponent extends Component {

  render() {

    return (

        <div>

            {this.props.value}

        </div>

    );

  }}

I don't want to rerender Parent component on every KeyDown event, that's why I don't put a value to the state.

I want ChildComponent rerenders on every KeyDown event, but ChildComponent renders only once because it doesn't get changed value and always shows 0 although this.value is changing.

Is it possible to rerender ChildComponent while changing this.value of the ParentComponent or I should place logic into ChildComponent using setState to render correct result?

You should add the value to parent state. This is simply the way React works. Even if you could manually trigger a rerender on the child component, it would still be 0 as still 0 is provided props. When React detects state has changed on Parent component, it will calculate the virtual dom of all child elements, do a diff on the virtual dom vs the real dom, then selectively update the real dom with those values (only the inner text of the Child component div will actually be new). React is incredibly optimised to handle rerendering using the virtual dom, and you should not worry about performance loss of this situation.

The reason the child component didn’t get called when value changes because you are overriding normal variable value but not react component state. So inorder to call child component when value changes you need to manage value property in component state of parent so whenever you modify it’s value using setState, component will re render

Change

   class Parent extends React.Component {



     componentDidMount() {

         document.addEventListener('keydown', () => {

            this.value++;

         })

    }



     this.value = 0;



     render() {

          return (<ChildComponent value={this.value} />) 

     }

   }

To

  class Parent extends React.Component {

      constructor(props){

           super(props);

           this.state = {

                 value: 0

           }

      }

    componentDidMount() {

        document.addEventListener('keydown', () => {

             this.setState({value: this.state.value++});

        })

    }



     render() {

          return (<ChildComponent value={this.state.value} />) 

     }

   }