react-best-practices
React rules which contain best practices and general code-smells, should not be run in CI/CD.
Run Locally
Rules (16)

Detection of dangerouslySetInnerHTML from non-constant definition. This can inadvertently expose users to cross-site scripting (XSS) attacks if this comes from user-provided input. If you have to use dangerouslySetInnerHTML, consider using a sanitization library such as DOMPurify to sanitize your HTML.

this rule has been deprecated.

This rule has been deprecated

This rule has been deprecated.

Detected a variable used in an anchor tag with the 'href' attribute. A malicious actor may be able to input the 'javascript:' URI, which could cause cross-site scripting (XSS). It is recommended to disallow 'javascript:' URIs within your application.

It's best practice to explicitly pass props to an HTML component rather than use the spread operator. The spread operator risks passing invalid HTML props to an HTML element, which can cause console warnings or worse, give malicious actors a way to inject unexpected attributes.

findDOMNode is an escape hatch used to access the underlying DOM node. In most cases, use of this escape hatch is discouraged because it pierces the component abstraction.

Legacy component lifecycle was detected - $METHOD.

Copying a prop into state in React -- this is bad practice as all updates to it are ignored. Instead, read props directly in your component and avoid copying props into state.

By declaring a styled component inside the render method of a react component, you are dynamically creating a new component on every render. This means that React will have to discard and re-calculate that part of the DOM subtree on each subsequent render, instead of just calculating the difference of what changed between them. This leads to performance bottlenecks and unpredictable behavior.

Calling setState on the current state is always a no-op. Did you mean to change the state like $Y(!$X) instead?

Translation key '$KEY' should match format 'MODULE.FEATURE.*'

JSX Component label not internationalized: '$MESSAGE'

JSX element not internationalized: '$MESSAGE'. You should support different languages in your website or app with internationalization. Instead, use packages such as `i18next` in order to internationalize your elements.

React MUI enqueueSnackbar() title is not internationalized: '$MESSAGE'

React useSelect() label is not internationalized - '$LABEL'. You should support different langauges in your website or app with internationalization. Instead, use packages such as `i18next` to internationalize your elements.