Why do PureComponents need props?

[ZYinMD]

I'm using "react/prefer-stateless-function": [1, { "ignorePureComponents": true }]

When I have a PureComponent that doesn't have props, it shows a warning.

However, the component below WILL re-render if the render() of its parent is called

const Child = () => <h1>I re-render when my parent does</h1>

You can see it with the React devtool in Chrome, turn on "highlight update"

If I change it to a PureComponent, it does not re-render:

class Child extends PureComponent {
  render() {
    return <h1>I don't</h1>;
  }
}

So to me, a PureComponent without props makes perfect sense.

[ZYinMD]

For a quick test yourself, use this code:

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

export default class App extends Component {
  state = {};

  handleClick = () => {
    this.setState({
      foo: 'bar'
    });
  }

  render() {
    return (
    <div>
      <button onClick={this.handleClick}>re-render parent</button>
      <Child1 />
      <Child1 />
      <Child1 />
      <Child1 />
      <Child2 />
      <Child2 />
      <Child2 />
      <Child2 />
    </div>
    );
  }
}

const Child1 = () => <h1>I re-render when my parent does</h1>;

class Child2 extends PureComponent {
  render() {
    return <h1>I don't</h1>;
  }
}

[ljharb]

Does the rule warn on Child2?

[ZYinMD]

Yes.

[ljharb]

With ignorePureComponents true, it’s not ignoring them, so that seems like a bug.

[ZYinMD]

It was intended, so you could say it's not a bug, but it enforces something that's not ideal.

[ljharb]

oh. good point. I’d expect react not to rerender a component that gets no props or context, but it might not have chosen to apply that optimization.

[alexzherdev]

Perhaps on the off chance that it could depend on some global state?

[ljharb]

If it does, react explicitly doesn't guarantee a rerender - only props and state do that.

[pawelnvk]

Hopefully I understood you correctly. Please checkout: #2238.

[ljharb]

Fixed by #2238.