eslint-plugin-react

The react/require-default-props rule ensures that every prop not marked as required has a corresponding defaultProps definition. This rule works with PropTypes, TypeScript, or Flow definitions.

Using defaultProps is preferred over custom default logic (like default function parameters) because React resolves defaultProps before PropTypes typechecking occurs, ensuring that typechecking applies to your default values.

const HelloWorld = ({ name }) => (
  <h1>Hello, {name.first} {name.last}!</h1>
);

HelloWorld.propTypes = {
  name: PropTypes.shape({
    first: PropTypes.string,
    last: PropTypes.string,
  })
};

HelloWorld.defaultProps = {
  name: 'john'
};

The react/no-find-dom-node rule disallows the usage of findDOMNode. This is because findDOMNode is being deprecated by Facebook as it prevents certain future React improvements. This rule is enabled by default in the recommended configuration.

To comply with this rule, use callback refs instead of findDOMNode to access DOM nodes.

// Incorrect: Using findDOMNode
class MyComponent extends Component {
  componentDidMount() {
    findDOMNode(this).scrollIntoView();
  }
  render() {
    return <div />
  }
}

// Correct: Using callback refs
class MyComponent extends Component {
  componentDidMount() {
    this.node.scrollIntoView();
  }
  render() {
    return <div ref={node => this.node = node} />
  }
}

The react/jsx-fragments rule enforces a consistent style for React fragments, allowing you to choose between the shorthand syntax (<>...</>) or the standard form (<React.Fragment>...</React.Fragment>).

This rule is automatically fixable using the ESLint --fix CLI option.

The react/async-server-action rule ensures that any function containing the 'use server' directive is declared as async. This is required by the React Server Actions specification, even if the function body does not explicitly use await or return a Promise.

This rule is manually fixable via editor suggestions.

// Correct: Function is marked as async
<form
  action={async () => {
    'use server';
    ...
  }}
>
  ...
</form>

// Correct: Named function is marked as async
async function action() {
  'use server';
  ...
}

The react/no-direct-mutation-state rule disallows direct mutation of this.state. You should treat this.state as immutable and use this.setState() to update state. Mutating this.state directly can cause subsequent calls to setState() to overwrite your changes.

Exception: Assigning to this.state is only acceptable within an ES6 class component constructor during instance creation.

// Correct: Using setState
var Hello = createReactClass({
  componentDidMount: function() {
    this.setState({
      name: this.props.name.toUpperCase()
    });
  },
  render: function() {
    return <div>Hello {this.state.name}</div>;
  }
});

// Correct: Initializing state in constructor
class Hello extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      foo: 'bar',
    };
  }
}

Do not use this rule if:

• You are not using JSX.
• You have a very large number of props to pass and explicit listing is impractical.
• Prop spreading is being used inside a Higher-Order Component (HOC).

If you are using the new JSX transform introduced in React 17, you should disable this rule by extending the plugin:react/jsx-runtime configuration in your ESLint config.

Note: This rule is automatically disabled if React version 19.0.0 or higher is detected, as the automatic JSX transform is mandatory in React 19.

The react/self-closing-comp rule disallows extra closing tags for components that do not have children. This rule helps keep JSX clean by enforcing self-closing tags (e.g., <Component />) instead of explicit opening and closing pairs (e.g., <Component></Component>) when no content is present.

This rule is automatically fixable using the ESLint --fix CLI option.

The react/hook-use-state rule ensures that variables destructured from a React.useState() call follow the symmetric [thing, setThing] naming convention. It also prevents assigning the useState result to a single variable instead of destructuring it into a value and a setter pair.

This rule provides editor suggestions to help fix naming issues manually.