Responsive Ad Area

Share This Post

test

shouldComponentUpdate won’t be called

I want my Video component not to rerender by returning false in shouldComponentUpdate. However shouldComponentUpdate is not being called. And the component is being rerendered.

Expected behaviour: when clicking on the video (clickHandler), shouldComponent will be called and returns false.

Actual behaviour: when clicking on the video (clickHandler), the component rerenders and logs ‘render component’.

Below you can find my code:

class Video extends Component {
  shouldComponentUpdate() {
    console.log('shouldupdate video');

    return false;
  }

  clickHandler = () => {
    if (this.props.controls) {
      this.props.toggleVideoPlayer();
    }
  }

  render() {
    console.log('render component');

    return (
      <div className={s.container} onClick={this.clickHandler}>
        <video className={s.video} ref={this.video} autoPlay loop>
          <track kind="captions" />
          <source src={this.props.mp4} type="video/mp4" />
          {this.props.ogv && <source src={this.props.ogv} type="video/ogg" />}
        </video>
      </div>
    );
  }
}


shouldComponentUpdate won’t be called
shouldComponentUpdate won’t be called
test
{$excerpt:n}

Share This Post

Leave a Reply

Your email address will not be Publishedd. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Skip to toolbar