MENU


React.PureCompoent

React.PureComponent is identical to React.Component but implements its own built-in version of shouldComponentUpdate() function which allows a render only if any of the props has changed. Trying to implement your own shouldComponentUpdate() function within a class component extending React.PureComponent will result in a run-time error.

As the props changes, Demo is rendered repeatedly.
RESETRUNFULL
class Demo extends React.PureComponent {
   constructor(props) {super(props);}
   render() {
      console.log('rendering Demo');
      return <h2>Testing</h2>;
   }}class Example extends React.Component{
   constructor(props){
      super(props);
      this.state={a:0};
   }
   componentDidMount(){
      setInterval(()=>{
         this.setState((state,props)=>({a:state.a+1}));
       },1000);
    }
    render(){
       console.log('rendering Example');
       return (<Demo y={this.state.a}/>);
    }}ReactDOM.render(
   <Example />,
   document.querySelector('div'));

class Demo extends React.PureComponent {
   constructor(props) {super(props);}
   render() {
      console.log('rendering Demo');
      return <h2>Testing</h2>;
   }}class Example extends React.Component{
   constructor(props){
      super(props);
      this.state={a:0};
   }
   componentDidMount(){
      setInterval(()=>{
         this.setState((state,props)=>({a:state.a+1}));
       },1000);
   }
   render(){
      console.log('rendering Example');
      return (<Demo y={1}/>);
   }}ReactDOM.render(
   <Example />,
   document.querySelector('div'));
An ordinary class component extending React.Component re-renders even if 'props' has not changed.
RESETRUNFULL
class Demo extends React.Component {
    constructor(props) {super(props);}
    render() { console.log('rendering Demo'); return <h2>Testing</h2>; }}class Example extends React.Component{
   constructor(props){super(props); }
   componentDidMount(){
   setInterval(()=>{
         this.setState((state,props)=>({a:state.a+1}));
      },1000);
   }
   render(){
      console.log('rendering Example');
      return (<Demo y={1}/>);
    }}ReactDOM.render(
   <Example />,
   document.querySelector('div'));