react/prefer-stateless-function with PureComponent.

[ghost]

I'm using:

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

but I'm also using this new Query component by react-apollo:

import React, { PureComponent } from "react";
import gql from "graphql-tag";
import { Query } from "react-apollo";

const GET_DOGS = gql`
  {
    dogs {
      id
      breed
    }
  }
`;

class DogsLove extends PureComponent {
    render() {
        return (
            <Query query={GET_DOGS}>
                {({ loading, error, data }) => {
                if (loading) return "Loading...";
                if (error) return `Error! ${error.message}`;

                return (
                    <select name="dog" onChange={onDogSelected}>
                    {data.dogs.map(dog => (
                        <option key={dog.id} value={dog.breed}>
                        {dog.breed}
                        </option>
                    ))}
                    </select>
                );
                }}
            </Query>
        )
    }
}

So, why this is a warning? (Or an error if I disable ignorePureComponents?)

I just need PureComponent because I don't need to re-render DogsLove component every time I switch Route. I need it to render just one time, the first time. Then Query component is making an observable and nothing more.

Where am I wrong?

[ghost]

Scenario and codesandbox here: apollographql/react-apollo#1938

[ljharb]

Can you paste the actual warning message (and denote the line it points to)?

[ljharb]

Separately, if you truly only want to render once, you’d want a normal class component with a shouldComponentUpdate that returns false.

[ghost]

Can you paste the actual warning message (and denote the line it points to)?

All the component is in warning:

Component should be written as a pure function (react/prefer-stateless-function)

[ljharb]

@johnunclesam what if you extends React.PureComponent (instead of bringing it in as a named import)?

[deemoding]

In lib/rules/prefer-stateless-function.js line 374,I find this code

if (list[component].hasSCU && list[component].usePropsOrContext) {
    continue;
}

But,I find that list[component].usePropsOrContext === undefined ,so that the next code isn't skiped.
So what's the usage of list[component].usePropsOrContext?Can I delete it? @yannickcr

[callumlocke]

I have the same problem. ignorePureComponents: true doesn't seem to do anything.

Doesn't matter if I extend PureComponent or React.PureComponent.

[JavierLaguna]

I have the same problem. ignorePureComponents: true doesn't seem to do anything.

Doesn't matter if I extend PureComponent or React.PureComponent.

[nickbouton]

Same problem here as well. If you add props or anything beyond a simple return to render, though, it stops complaining.

[dimpiax]

As the option, if you are experimenting with views you can avoid this error writing:

render() {
  this.props; // declare this!

  return (<h1>Hello</h1>);
}

[FlaviooLima]

This bug need some attention :)

[golopot]

Fixed by #2238?

https://github.com/yannickcr/eslint-plugin-react/blob/6e4f43ef4739191a2157659de178d1cd9a28a42e/tests/lib/rules/prefer-stateless-function.js#L310-L321

[JavierLaguna]

The fix is merged on the current version v7.12.4 ?

[golopot]

No, the pr was merged 18 days ago while v7.12.4 is released 3 months ago.

[JavierLaguna]

No, the pr was merged 18 days ago while v7.12.4 is released 3 months ago.

Thank you!