| JS.REACT.BOOLEAN.PROP.NAMING
|
Stylistic Issue |
Enforces consistent naming for boolean props |
3 |
False |
| JS.REACT.BUTTON.HAS.TYPE
|
Suspicious Code Practices |
Forbid "button" element without an explicit "type" attribute |
3 |
False |
| JS.REACT.DEFAULT.PROPS.MATCH.PROP.TYPES
|
Improper Encapsulation |
Enforce all defaultProps are defined and not "required" in propTypes. |
3 |
False |
| JS.REACT.DESTRUCTURING.ASSIGNMENT
|
Stylistic Issue |
Enforce consistent usage of destructuring assignment of props, state, and context |
3 |
False |
| JS.REACT.DISPLAY.NAME
|
Improper Encapsulation |
Prevent missing displayName in a React component definition |
3 |
True |
| JS.REACT.FORBID.COMPONENT.PROPS
|
Banned Code |
Forbid certain props on components |
2 |
False |
| JS.REACT.FORBID.DOM.PROPS
|
Banned Code |
Forbid certain props on DOM Nodes |
2 |
False |
| JS.REACT.FORBID.ELEMENTS
|
Banned Code |
Forbid certain elements |
2 |
False |
| JS.REACT.FORBID.FOREIGN.PROP.TYPES
|
Suspicious Code Practices |
Forbid using another component's propTypes |
3 |
False |
| JS.REACT.FORBID.PROP.TYPES
|
Banned Code |
Forbid certain propTypes |
2 |
False |
| JS.REACT.FUNCTION.COMPONENT.DEFINITION
|
Stylistic Issue |
Standardize the way function component get defined |
3 |
False |
| JS.REACT.HOOK.USE.STATE
|
Improper Encapsulation |
Ensure symmetric naming of useState hook value and setter variables |
3 |
False |
| JS.REACT.IFRAME.MISSING.SANDBOX
|
Unsafe Code Practices |
Enforce sandbox attribute on iframe elements |
3 |
False |
| JS.REACT.JSX.BOOLEAN.VALUE
|
Stylistic Issue |
Enforce boolean attributes notation in JSX |
3 |
False |
| JS.REACT.JSX.CHILD.ELEMENT.SPACING
|
Stylistic Issue |
Ensures inline tags are not rendered without spaces between them |
3 |
False |
| JS.REACT.JSX.CLOSING.BRACKET.LOCATION
|
Stylistic Issue |
Validate closing bracket location in JSX |
3 |
False |
| JS.REACT.JSX.CLOSING.TAG.LOCATION
|
Stylistic Issue |
Validate closing tag location for multiline JSX |
3 |
False |
| JS.REACT.JSX.CURLY.BRACE.PRESENCE
|
Stylistic Issue |
Disallow unnecessary JSX expressions when literals alone are sufficient or enfore JSX expressions on literals in JSX children
or attributes
|
3 |
False |
| JS.REACT.JSX.CURLY.NEWLINE
|
Stylistic Issue |
Enforce consistent line breaks inside jsx curly |
3 |
False |
| JS.REACT.JSX.CURLY.SPACING
|
Stylistic Issue |
Enforce or disallow spaces inside of curly braces in JSX attributes |
3 |
False |
| JS.REACT.JSX.EQUALS.SPACING
|
Stylistic Issue |
Disallow or enforce spaces around equal signs in JSX attributes |
3 |
False |
| JS.REACT.JSX.FILENAME.EXTENSION
|
Suspicious Code Practices |
Restrict file extensions that may contain JSX |
3 |
False |
| JS.REACT.JSX.FIRST.PROP.NEW.LINE
|
Stylistic Issue |
Ensure proper position of the first property in JSX |
3 |
False |
| JS.REACT.JSX.FRAGMENTS
|
Stylistic Issue |
Enforce shorthand or standard form for React fragments |
3 |
False |
| JS.REACT.JSX.HANDLER.NAMES
|
Stylistic Issue |
Enforce event handler naming conventions in JSX |
3 |
False |
| JS.REACT.JSX.INDENT
|
Stylistic Issue |
Validate JSX indentation |
3 |
False |
| JS.REACT.JSX.INDENT.PROPS
|
Stylistic Issue |
Validate props indentation in JSX |
3 |
False |
| JS.REACT.JSX.KEY
|
Suspicious Code Practices |
Report missing 'key' props in iterators/collection literals |
3 |
True |
| JS.REACT.JSX.MAX.DEPTH
|
Stylistic Issue |
Validate JSX maximum depth |
3 |
False |
| JS.REACT.JSX.MAX.PROPS.PER.LINE
|
Stylistic Issue |
Limit maximum of props on a single line in JSX |
3 |
False |
| JS.REACT.JSX.NEWLINE
|
Stylistic Issue |
Require or prevent a new line after jsx elements and expressions. |
3 |
False |
| JS.REACT.JSX.NO.BIND
|
Suspicious Code Practices |
Prevents usage of Function.prototype.bind and arrow functions in React component props |
3 |
False |
| JS.REACT.JSX.NO.COMMENT.TEXTNODES
|
Suspicious Code Practices |
Comments inside children section of tag should be placed inside braces |
3 |
True |
| JS.REACT.JSX.NO.CONSTRUCTED.CONTEXT.VALUES
|
Suspicious Code Practices |
Prevents JSX context provider values from taking values that will cause needless rerenders. |
3 |
False |
| JS.REACT.JSX.NO.DUPLICATE.PROPS
|
Suspicious Code Practices |
Enforce no duplicate props |
3 |
True |
| JS.REACT.JSX.NO.LEAKED.RENDER
|
Unsafe Code Practices |
Prevent problematic leaked values from being rendered |
3 |
False |
| JS.REACT.JSX.NO.LITERALS
|
Suspicious Code Practices |
Prevent using string literals in React component definition |
3 |
False |
| JS.REACT.JSX.NO.SCRIPT.URL
|
Unsafe Code Practices |
Forbid 'javascript:' URLs |
2 |
False |
| JS.REACT.JSX.NO.TARGET.BLANK
|
Unsafe Code Practices |
Forbid 'target="_blank"' attribute without 'rel="noreferrer"' |
2 |
True |
| JS.REACT.JSX.NO.UNDEF
|
Suspicious Code Practices |
Disallow undeclared variables in JSX |
3 |
True |
| JS.REACT.JSX.NO.USELESS.FRAGMENT
|
Suspicious Code Practices |
Disallow unnecessary fragments |
3 |
False |
| JS.REACT.JSX.ONE.EXPRESSION.PER.LINE
|
Stylistic Issue |
Limit to one expression per line in JSX |
3 |
False |
| JS.REACT.JSX.PASCAL.CASE
|
Stylistic Issue |
Enforce PascalCase for user-defined JSX components |
3 |
False |
| JS.REACT.JSX.PROPS.NO.MULTI.SPACES
|
Stylistic Issue |
Disallow multiple spaces between inline JSX props |
3 |
False |
| JS.REACT.JSX.PROPS.NO.SPREADING
|
Stylistic Issue |
Prevent JSX prop spreading |
3 |
False |
| JS.REACT.JSX.SORT.DEFAULT.PROPS
|
Stylistic Issue |
Enforce default props alphabetical sorting |
3 |
False |
| JS.REACT.JSX.SORT.PROPS
|
Stylistic Issue |
Enforce props alphabetical sorting |
3 |
False |
| JS.REACT.JSX.SPACE.BEFORE.CLOSING
|
Stylistic Issue |
Validate spacing before closing bracket in JSX |
3 |
False |
| JS.REACT.JSX.TAG.SPACING
|
Stylistic Issue |
Validate whitespace in and around the JSX opening and closing brackets |
3 |
False |
| JS.REACT.JSX.USES.REACT
|
Suspicious Code Practices |
Prevent React to be marked as unused |
3 |
True |
| JS.REACT.JSX.USES.VARS
|
Unused Local Variables |
Prevent variables used in JSX to be marked as unused |
3 |
True |
| JS.REACT.JSX.WRAP.MULTILINES
|
Stylistic Issue |
Prevent missing parentheses around multilines JSX |
3 |
False |
| JS.REACT.NO.ACCESS.STATE.IN.SETSTATE
|
Suspicious Code Practices |
Reports when this.state is accessed within setState |
3 |
False |
| JS.REACT.NO.ADJACENT.INLINE.ELEMENTS
|
Stylistic Issue |
Prevent adjacent inline elements not separated by whitespace. |
3 |
False |
| JS.REACT.NO.ARRAY.INDEX.KEY
|
Suspicious Code Practices |
Prevent usage of Array index in keys |
3 |
False |
| JS.REACT.NO.ARROW.FUNCTION.LIFECYCLE
|
Suspicious Code Practices |
Lifecycle methods should be methods on the prototype, not class fields |
3 |
False |
| JS.REACT.NO.CHILDREN.PROP
|
Suspicious Code Practices |
Prevent passing of children as props. |
3 |
True |
| JS.REACT.NO.DANGER
|
Unsafe Code Practices |
Prevent usage of dangerous JSX props |
2 |
False |
| JS.REACT.NO.DANGER.WITH.CHILDREN
|
Suspicious Code Practices |
Report when a DOM element is using both children and dangerouslySetInnerHTML |
3 |
True |
| JS.REACT.NO.DEPRECATED
|
Unsafe Code Practices |
Prevent usage of deprecated methods |
2 |
True |
| JS.REACT.NO.DID.MOUNT.SET.STATE
|
Performance Issues |
Prevent usage of setState in componentDidMount |
3 |
False |
| JS.REACT.NO.DID.UPDATE.SET.STATE
|
Performance Issues |
Prevent usage of setState in componentDidUpdate |
3 |
False |
| JS.REACT.NO.DIRECT.MUTATION.STATE
|
Suspicious Code Practices |
Prevent direct mutation of this.state |
3 |
True |
| JS.REACT.NO.FIND.DOM.NODE
|
Unsafe Code Practices |
Prevent usage of findDOMNode |
3 |
True |
| JS.REACT.NO.INVALID.HTML.ATTRIBUTE
|
Maintainability Issues |
Forbid attribute with an invalid values |
3 |
False |
| JS.REACT.NO.IS.MOUNTED
|
Unsafe Code Practices |
Prevent usage of isMounted |
3 |
True |
| JS.REACT.NO.MULTI.COMP
|
Improper Encapsulation |
Prevent multiple component definition per file |
3 |
False |
| JS.REACT.NO.NAMESPACE
|
Improper Encapsulation |
Enforce that namespaces are not used in React elements |
3 |
False |
| JS.REACT.NO.REDUNDANT.SHOULD.COMPONENT.UPDATE
|
Redundant Code |
Flag shouldComponentUpdate when extending PureComponent |
3 |
False |
| JS.REACT.NO.RENDER.RETURN.VALUE
|
Suspicious Code Practices |
Prevent usage of the return value of React.render |
3 |
True |
| JS.REACT.NO.SET.STATE
|
Improper Encapsulation |
Prevent usage of setState |
3 |
False |
| JS.REACT.NO.STRING.REFS
|
Suspicious Code Practices |
Prevent string definitions for references and prevent referencing this.refs |
3 |
True |
| JS.REACT.NO.THIS.IN.SFC
|
Unsafe Code Practices |
Report "this" being used in stateless components |
2 |
False |
| JS.REACT.NO.TYPOS
|
Suspicious Code Practices |
Prevent common typos |
3 |
False |
| JS.REACT.NO.UNESCAPED.ENTITIES
|
Suspicious Code Practices |
Detect unescaped HTML entities, which might represent malformed tags |
3 |
True |
| JS.REACT.NO.UNKNOWN.PROPERTY
|
Suspicious Code Practices |
Prevent usage of unknown DOM property |
3 |
True |
| JS.REACT.NO.UNSAFE
|
Suspicious Code Practices |
Prevent usage of unsafe lifecycle methods |
3 |
False |
| JS.REACT.NO.UNSTABLE.NESTED.COMPONENTS
|
Unsafe Code Practices |
Prevent creating unstable components inside components |
2 |
False |
| JS.REACT.NO.UNUSED.CLASS.COMPONENT.METHODS
|
Unused Local Variables |
Prevent declaring unused methods of component class |
3 |
False |
| JS.REACT.NO.UNUSED.PROP.TYPES
|
Unused Local Variables |
Prevent definitions of unused prop types |
3 |
False |
| JS.REACT.NO.UNUSED.STATE
|
Unused Local Variables |
Prevent definition of unused state fields |
3 |
False |
| JS.REACT.NO.WILL.UPDATE.SET.STATE
|
Unsafe Code Practices |
Prevent usage of setState in componentWillUpdate |
2 |
False |
| JS.REACT.PREFER.ES6.CLASS
|
Stylistic Issue |
Enforce ES5 or ES6 class for React Components |
3 |
False |
| JS.REACT.PREFER.EXACT.PROPS
|
Unsafe Code Practices |
Prefer exact proptype definitions |
3 |
False |
| JS.REACT.PREFER.READ.ONLY.PROPS
|
Stylistic Issue |
Require read-only props. |
3 |
False |
| JS.REACT.PREFER.STATELESS.FUNCTION
|
Performance Issues |
Enforce stateless components to be written as a pure function |
3 |
False |
| JS.REACT.PROP.TYPES
|
Maintainability Issues |
Prevent missing props validation in a React component definition |
3 |
True |
| JS.REACT.REACT.IN.JSX.SCOPE
|
Suspicious Code Practices |
Prevent missing React when using JSX |
3 |
True |
| JS.REACT.REQUIRE.DEFAULT.PROPS
|
Improper Encapsulation |
Enforce a defaultProps definition for every prop that is not a required prop. |
3 |
False |
| JS.REACT.REQUIRE.OPTIMIZATION
|
Stylistic Issue |
Enforce React components to have a shouldComponentUpdate method |
3 |
False |
| JS.REACT.REQUIRE.RENDER.RETURN
|
Improper Encapsulation |
Enforce ES5 or ES6 class for returning value in render function |
3 |
True |
| JS.REACT.SELF.CLOSING.COMP
|
Stylistic Issue |
Prevent extra closing tags for components without children |
3 |
False |
| JS.REACT.SORT.COMP
|
Stylistic Issue |
Enforce component methods order |
3 |
False |
| JS.REACT.SORT.PROP.TYPES
|
Stylistic Issue |
Enforce propTypes declarations alphabetical sorting |
3 |
False |
| JS.REACT.STATE.IN.CONSTRUCTOR
|
Stylistic Issue |
State initialization in an ES6 class component should be in a constructor |
3 |
False |
| JS.REACT.STATIC.PROPERTY.PLACEMENT
|
Stylistic Issue |
Defines where React component static properties should be positioned. |
3 |
False |
| JS.REACT.STYLE.PROP.OBJECT
|
Stylistic Issue |
Enforce style prop value is an object |
3 |
False |
| JS.REACT.VOID.DOM.ELEMENTS.NO.CHILDREN
|
Suspicious Code Practices |
Prevent passing of children to void DOM elements (e.g. '<br />'). |
3 |
False |