react-best-practices
React rules which contain best practices and general code-smells, should not be run in CI/CD.
Run Locally
Rules (16)
returntocorpDetection 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.
returntocorpthis rule has been deprecated.
returntocorpThis rule has been deprecated
returntocorpThis rule has been deprecated.
returntocorpDetected 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.
returntocorpIt'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.
returntocorpfindDOMNode 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.
returntocorpLegacy component lifecycle was detected - $METHOD.
returntocorpCopying 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.
returntocorpBy 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.
returntocorpCalling setState on the current state is always a no-op. Did you mean to change the state like $Y(!$X) instead?
returntocorpTranslation key '$KEY' should match format 'MODULE.FEATURE.*'
returntocorpJSX Component label not internationalized: '$MESSAGE'
returntocorpJSX 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.
returntocorpReact MUI enqueueSnackbar() title is not internationalized: '$MESSAGE'
returntocorpReact 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.