React.Component and React.PureComponent show different behaviour

Question

I am adding runnable code snippets below. see the difference First one is React.PureComponent version

class App extends React.PureComponent {
 
  render() {
    console.log('re-render')
    return (
    <div>
     <span>I am parent</span>
     {this.props.children}
    </div>
    )
  }
}

  ReactDOM.render(
    <App>
      <div>
        I am the child
      </div>
    </App>,
    document.getElementById('app')
  )


//setTimeout(render, 1000)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Second one is React.Component version

class App extends React.Component {
  
  render() {
    console.log('re-render')
    return (
    <div>
     <span>I am parent</span>
     {this.props.children}
    </div>
    )
  }
}

  ReactDOM.render(
    <App>
      <div>
        I am the child
      </div>
    </App>,
    document.getElementById('app')
  )


//setTimeout(render, 1000)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Why the second one runs successfully, but not the first one?? I tried exploring for the reason, but didnot find any good reason

Answer 1

I may be wrong, but I don't think React.PureComponent exists in version 15.1.0.

The error you get ("Uncaught TypeError: Super expression must either be null or a function, not undefined") is usually triggered by a typo, or by extending a class that doesn't exist (see more details in this SO post).

My suggestion is to keep your 3rd party libs up to date and use the latest version of React in this case.

Here's your own example after the react upgrade:

class App extends React.PureComponent {
 
  render() {
    console.log('re-render')
    return (
    <div>
     <span>I am parent</span>
     {this.props.children}
    </div>
    )
  }
}

  ReactDOM.render(
    <App>
      <div>
        I am the child
      </div>
    </App>,
    document.getElementById('app')
  )


//setTimeout(render, 1000)

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<div id="app"></div>

Answer 2

React.PureComponent is added after 15.3.0 version because of which there is a error in first case. If you want your first case to work please check the snippet. I have updated the react version.

class App extends React.PureComponent {
  render() {
    console.log('re-render')
    return (
    <div>
     <span>I am parent</span>
     {this.props.children}
    </div>
    )
  }
}

  ReactDOM.render(
    <App>
      <div>
        I am the child
      </div>
    </App>,
    document.getElementById('app')
  )


//setTimeout(render, 1000)

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="app"></div>

For reference please check react-release-version

Answer 3

React.PureComponent will not work in your case because you are using a older version of ReactJS. Actually the support for React.PureComponent was introduced with React 15.3 on June 29, 2016.