Big update!Announcing Socket for GitHub 1.0. Learn more ā†’
Log in


Package Overview
File Explorer

Advanced tools


React specific linting rules for ESLint


Version published
Weekly downloads
decreased by-4.29%

Weekly downloads



[7.30.1] - 2022.06.23


  • [display-name]: fix false positive for HOF returning only nulls ([#3291][] @golopot)
  • [jsx-no-leaked-render]: avoid unnecessary negation operators and ternary branches deletion ([#3299][] @Belco90)
  • [display-name]: fix false positive when using memo ([#3304][] @golopot)


  • [Docs] [jsx-tag-spacing]: rename option from [#3264][] ([#3294[] @ljharb)
  • [Docs] [jsx-key]: split the examples ([#3293][] @ioggstream)




Maintenance Status NPM version Dependency Status Code Climate Tidelift

React specific linting rules for eslint


$ npm install eslint eslint-plugin-react --save-dev

It is also possible to install ESLint globally rather than locally (using npm install eslint --global). However, this is not recommended, and any plugins or shareable configs that you use must be installed locally in either case.


Use our preset to get reasonable defaults:

"extends": [ "eslint:recommended", "plugin:react/recommended" ]

If you are using the new JSX transform from React 17, extend react/jsx-runtime in your eslint config (add "plugin:react/jsx-runtime" to "extends") to disable the relevant rules.

You should also specify settings that will be shared across all the plugin rules. (More about eslint shared settings)

{ "settings": { "react": { "createClass": "createReactClass", // Regex for Component Factory to use, // default to "createReactClass" "pragma": "React", // Pragma to use, default to "React" "fragment": "Fragment", // Fragment to use (may be a property of <pragma>), default to "Fragment" "version": "detect", // React version. "detect" automatically picks the version you have installed. // You can also use `16.0`, `16.3`, etc, if you want to override the detected value. // It will default to "latest" and warn if missing, and to "detect" in the future "flowVersion": "0.53" // Flow version }, "propWrapperFunctions": [ // The names of any function used to wrap propTypes, e.g. `forbidExtraProps`. If this isn't set, any propTypes wrapped in a function will be skipped. "forbidExtraProps", {"property": "freeze", "object": "Object"}, {"property": "myFavoriteWrapper"}, // for rules that check exact prop wrappers {"property": "forbidExtraProps", "exact": true} ], "componentWrapperFunctions": [ // The name of any function used to wrap components, e.g. Mobx `observer` function. If this isn't set, components wrapped by these functions will be skipped. "observer", // `property` {"property": "styled"}, // `object` is optional {"property": "observer", "object": "Mobx"}, {"property": "observer", "object": "<pragma>"} // sets `object` to whatever value `settings.react.pragma` is set to ], "formComponents": [ // Components used as alternatives to <form> for forms, eg. <Form endpoint={ url } /> "CustomForm", {"name": "Form", "formAttribute": "endpoint"} ], "linkComponents": [ // Components used as alternatives to <a> for linking, eg. <Link to={ url } /> "Hyperlink", {"name": "Link", "linkAttribute": "to"} ] } }

If you do not use a preset you will need to specify individual rules and add extra configuration.

Add "react" to the plugins section.

{ "plugins": [ "react" ] }

Enable JSX support.

With eslint 2+

{ "parserOptions": { "ecmaFeatures": { "jsx": true } } }

Enable the rules that you would like to use.

"rules": { "react/jsx-uses-react": "error", "react/jsx-uses-vars": "error", }

List of supported rules

āœ”: Enabled in the recommended configuration.
šŸ”§: Fixable with eslint --fix.

react/boolean-prop-namingEnforces consistent naming for boolean props
react/button-has-typeForbid "button" element without an explicit "type" attribute
react/default-props-match-prop-typesEnforce all defaultProps are defined and not "required" in propTypes.
šŸ”§react/destructuring-assignmentEnforce consistent usage of destructuring assignment of props, state, and context
āœ”react/display-namePrevent missing displayName in a React component definition
react/forbid-component-propsForbid certain props on components
react/forbid-dom-propsForbid certain props on DOM Nodes
react/forbid-elementsForbid certain elements
react/forbid-foreign-prop-typesForbid using another component's propTypes
react/forbid-prop-typesForbid certain propTypes
šŸ”§react/function-component-definitionStandardize the way function component get defined
react/hook-use-stateEnsure symmetric naming of useState hook value and setter variables
react/iframe-missing-sandboxEnforce sandbox attribute on iframe elements
react/no-access-state-in-setstateReports when this.state is accessed within setState
react/no-adjacent-inline-elementsPrevent adjacent inline elements not separated by whitespace.
react/no-array-index-keyPrevent usage of Array index in keys
šŸ”§react/no-arrow-function-lifecycleLifecycle methods should be methods on the prototype, not class fields
āœ”react/no-children-propPrevent passing of children as props.
react/no-dangerPrevent usage of dangerous JSX props
āœ”react/no-danger-with-childrenReport when a DOM element is using both children and dangerouslySetInnerHTML
āœ”react/no-deprecatedPrevent usage of deprecated methods
react/no-did-mount-set-statePrevent usage of setState in componentDidMount
react/no-did-update-set-statePrevent usage of setState in componentDidUpdate
āœ”react/no-direct-mutation-statePrevent direct mutation of this.state
āœ”react/no-find-dom-nodePrevent usage of findDOMNode
šŸ”§react/no-invalid-html-attributeForbid attribute with an invalid values`
āœ”react/no-is-mountedPrevent usage of isMounted
react/no-multi-compPrevent multiple component definition per file
react/no-namespaceEnforce that namespaces are not used in React elements
react/no-redundant-should-component-updateFlag shouldComponentUpdate when extending PureComponent
āœ”react/no-render-return-valuePrevent usage of the return value of React.render
react/no-set-statePrevent usage of setState
āœ”react/no-string-refsPrevent string definitions for references and prevent referencing this.refs
react/no-this-in-sfcReport "this" being used in stateless components
react/no-typosPrevent common typos
āœ”react/no-unescaped-entitiesDetect unescaped HTML entities, which might represent malformed tags
āœ”šŸ”§react/no-unknown-propertyPrevent usage of unknown DOM property
react/no-unsafePrevent usage of unsafe lifecycle methods
react/no-unstable-nested-componentsPrevent creating unstable components inside components
react/no-unused-class-component-methodsPrevent declaring unused methods of component class
react/no-unused-prop-typesPrevent definitions of unused prop types
react/no-unused-statePrevent definition of unused state fields
react/no-will-update-set-statePrevent usage of setState in componentWillUpdate
react/prefer-es6-classEnforce ES5 or ES6 class for React Components
react/prefer-exact-propsPrefer exact proptype definitions
šŸ”§react/prefer-read-only-propsRequire read-only props.
react/prefer-stateless-functionEnforce stateless components to be written as a pure function
āœ”react/prop-typesPrevent missing props validation in a React component definition
āœ”react/react-in-jsx-scopePrevent missing React when using JSX
react/require-default-propsEnforce a defaultProps definition for every prop that is not a required prop.
react/require-optimizationEnforce React components to have a shouldComponentUpdate method
āœ”react/require-render-returnEnforce ES5 or ES6 class for returning value in render function
šŸ”§react/self-closing-compPrevent extra closing tags for components without children
react/sort-compEnforce component methods order
react/sort-prop-typesEnforce propTypes declarations alphabetical sorting
react/state-in-constructorState initialization in an ES6 class component should be in a constructor
react/static-property-placementDefines where React component static properties should be positioned.
react/style-prop-objectEnforce style prop value is an object
react/void-dom-elements-no-childrenPrevent passing of children to void DOM elements (e.g. <br />).

JSX-specific rules

šŸ”§react/jsx-boolean-valueEnforce boolean attributes notation in JSX
react/jsx-child-element-spacingEnsures inline tags are not rendered without spaces between them
šŸ”§react/jsx-closing-bracket-locationValidate closing bracket location in JSX
šŸ”§react/jsx-closing-tag-locationValidate closing tag location for multiline JSX
šŸ”§react/jsx-curly-brace-presenceDisallow unnecessary JSX expressions when literals alone are sufficient or enfore JSX expressions on literals in JSX children or attributes
šŸ”§react/jsx-curly-newlineEnforce consistent line breaks inside jsx curly
šŸ”§react/jsx-curly-spacingEnforce or disallow spaces inside of curly braces in JSX attributes
šŸ”§react/jsx-equals-spacingDisallow or enforce spaces around equal signs in JSX attributes
react/jsx-filename-extensionRestrict file extensions that may contain JSX
šŸ”§react/jsx-first-prop-new-lineEnsure proper position of the first property in JSX
šŸ”§react/jsx-fragmentsEnforce shorthand or standard form for React fragments
react/jsx-handler-namesEnforce event handler naming conventions in JSX
šŸ”§react/jsx-indentValidate JSX indentation
šŸ”§react/jsx-indent-propsValidate props indentation in JSX
āœ”react/jsx-keyReport missing key props in iterators/collection literals
react/jsx-max-depthValidate JSX maximum depth
šŸ”§react/jsx-max-props-per-lineLimit maximum of props on a single line in JSX
šŸ”§react/jsx-newlineRequire or prevent a new line after jsx elements and expressions.
react/jsx-no-bindPrevents usage of Function.prototype.bind and arrow functions in React component props
āœ”react/jsx-no-comment-textnodesComments inside children section of tag should be placed inside braces
react/jsx-no-constructed-context-valuesPrevents JSX context provider values from taking values that will cause needless rerenders.
āœ”react/jsx-no-duplicate-propsEnforce no duplicate props
šŸ”§react/jsx-no-leaked-renderPrevent problematic leaked values from being rendered
react/jsx-no-literalsPrevent using string literals in React component definition
react/jsx-no-script-urlForbid javascript: URLs
āœ”šŸ”§react/jsx-no-target-blankForbid target="_blank" attribute without rel="noreferrer"
āœ”react/jsx-no-undefDisallow undeclared variables in JSX
šŸ”§react/jsx-no-useless-fragmentDisallow unnecessary fragments
šŸ”§react/jsx-one-expression-per-lineLimit to one expression per line in JSX
react/jsx-pascal-caseEnforce PascalCase for user-defined JSX components
šŸ”§react/jsx-props-no-multi-spacesDisallow multiple spaces between inline JSX props
react/jsx-props-no-spreadingPrevent JSX prop spreading
react/jsx-sort-default-propsEnforce default props alphabetical sorting
šŸ”§react/jsx-sort-propsEnforce props alphabetical sorting
šŸ”§react/jsx-space-before-closingValidate spacing before closing bracket in JSX
šŸ”§react/jsx-tag-spacingValidate whitespace in and around the JSX opening and closing brackets
āœ”react/jsx-uses-reactPrevent React to be marked as unused
āœ”react/jsx-uses-varsPrevent variables used in JSX to be marked as unused
šŸ”§react/jsx-wrap-multilinesPrevent missing parentheses around multilines JSX

Other useful plugins

Shareable configurations

This plugin exports a recommended configuration that enforces React good practices.

To enable this configuration use the extends property in your .eslintrc config file:

{ "extends": ["eslint:recommended", "plugin:react/recommended"] }

See eslint documentation for more information about extending configuration files.


This plugin also exports an all configuration that includes every available rule. This pairs well with the eslint:all rule.

{ "plugins": [ "react" ], "extends": ["eslint:all", "plugin:react/all"] }

Note: These configurations will import eslint-plugin-react and enable JSX in parser options.


eslint-plugin-react is licensed under the MIT License.



What is eslint-plugin-react?

React specific linting rules for ESLint

Is eslint-plugin-react popular?

The npm package eslint-plugin-react receives a total of 11,872,307 weekly downloads. As such, eslint-plugin-react popularity was classified as popular.

Is eslint-plugin-react well maintained?

We found that eslint-plugin-react demonstrated a healthy version release cadence and project activity. It has 2 open source maintainers collaborating on the project.

Last updated on 23 Jun 2022


Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.

  • Terms
  • Privacy
  • Security

Made with āš”ļø by Socket Inc