Why am i getting ESLint - Component should be written as a pure function?

Question

I am getting this eslint error, only for the app component "Component should be written as a pure function" and i am not sure why.

I checked other posts with this error and none of the solution seem to work.

import React from "react";
import { Switch, Route } from "react-router-dom";
import NotFound from "../Pages/Standalone/NotFoundDedicated";
import Auth from "./Auth";
import Application from "./Application";

import LoginDedicated from "../Pages/Standalone/LoginDedicated";
import ArticleNews from "./ArticleNews";
import ThemeWrapper, { AppContext } from "./ThemeWrapper";
window.__MUI_USE_NEXT_TYPOGRAPHY_VARIANTS__ = true;

class App extends React.Component {
  render() {
    return (
      <ThemeWrapper>
        <AppContext.Consumer>
          {changeMode => (
            <Switch>
              <Route path="/" exact component={LoginDedicated} />
              <Route
                path="/app"
                render={props => <Application {...props} changeMode={changeMode} />}
              />
              <Route
                path="/blog"
                render={props => <ArticleNews {...props} changeMode={changeMode} />}
              />
              <Route component={Auth} />
              <Route component={NotFound} />
            </Switch>
          )}
        </AppContext.Consumer>
      </ThemeWrapper>
    );
  }
}

export default App;

It is not a error but rather a warning. You have a class based component that only has render and never use `this`, so you could rewrite it as a stateless functional component. `function App() { return (/* render return value goes here */)}` — Yury Tarabanko, Jul 09 '20 at 19:25
Since your component does not seem to have any state values, using classes is considered an overkill. Try converting it into a functional(pure) component: https://reactjs.org/docs/components-and-props.html — Treycos, Jul 09 '20 at 19:26

score -1 · Accepted Answer · answered Jul 09 '20 at 19:26

Your component contains no state, but you are using the form that supports state. There is some overhead that comes with extending React.Component that can be avoided in this case.

Just alter your class to look like

function App(props) {
    return (
        <ThemeWrapper>
        <AppContext.Consumer>
          {changeMode => (
            <Switch>
              <Route path="/" exact component={LoginDedicated} />
              <Route
                path="/app"
                render={props => <Application {...props} changeMode={changeMode} />}
              />
              <Route
                path="/blog"
                render={props => <ArticleNews {...props} changeMode={changeMode} />}
              />
              <Route component={Auth} />
              <Route component={NotFound} />
            </Switch>
          )}
        </AppContext.Consumer>
      </ThemeWrapper>
    );
}

Why am i getting ESLint - Component should be written as a pure function?

1 Answers1