jsx-eslint/eslint-plugin-react

Is there an existing issue for this? I have searched the existing issues and my issue is unique My issue appears in the command-line and not only in the text editor Description Overview With functions: 'defaultArguments', a function component that is wrapped in React.memo(...) (or forwardRef(...)) and sets its default via a default argument is still reported with shouldHaveDefault ("…has no corresponding defaultProps declaration"). The same component without the wrapper passes. Reproduction ESLint config: 'react/require-default-props': ['warn', { functions: 'defaultArguments' }] Code: import * as React from 'react'; type Props = { a?: string }; const A = React.memo(({ a = 'x' }: Props) => <div>{a}</div>); // reported, but should pass const B = ({ a = 'x' }: Props) => <div>{a}</div>; // passes const C = ({ a }: Props) => <div>{a}</div>; // reported (correct) const D = React.memo(({ a }: Props) => <div>{a}</div>); // reported, but with the wron

The no-danger rules only reports dangerouslySetInnerHTML when it's used in JSX, but not when it's used in React.createElement To be fair, it's mentioned in the rule description, but it took me a bit to see this. Also, the similar no-danger-with-children rule does report usage in React.createElement, so it would be nice to be consistent here.

A pattern we use commonly in our codebase (pre-dates me, and we're too far along the road now to change) is to prefix some components with an underscore e.g. when forwarding refs, or to signal a component shouldn't be exported etc. Components with this naming convention do not get detected as parent components, and thus the unstable nested components are not flagged function _Parent() { function NotFlagged() { return <b>oh no</b> } return <NotFlagged /> } Given there have been other issues raised relating, and carve outs added for, this naming convention: #3560 #2603 I think this constitutes a bug/oversight in this rule. Happy to make a PR, if there is agreement

Is there an existing issue for this? I have searched the existing issues and my issue is unique My issue appears in the command-line and not only in the text editor Description Overview In some scenarios where {""} is used for whitespace preservation, jsx-curly-brace-presence incorrectly flags the braces as unnecessary, and --fix introduces a visual regression. export default function App() { return ( <span> <span>The braces</span> {""} matter here. </span> ); } Applying "react/jsx-curly-brace-presence": ["error", { "children": "never" }] to this block causes 5:7 error Curly braces are unnecessary here react/jsx-curly-brace-presence This is incorrect, since the {""} preserves the whitespace between "braces" and "matter". Additionally, eslint --fix leads to export default function App() { return ( <span> <span>The braces</span> matter here. </span> ); } which is a visual regression: "The braces matter here." becomes "The b

Is there an existing issue for this? I have searched the existing issues and my issue is unique My issue appears in the command-line and not only in the text editor Description Overview The no-unknown-property rule only recognizes onTransitionEnd and onTransitionEndCapture from the CSS Transition events, but does not recognize the remaining standard transition event handlers. These are valid DOM events listed on MDN's Element interface and are properly typed in @types/react (DefinitelyTyped source). Missing event handlers (6): onTransitionCancel onTransitionCancelCapture onTransitionRun onTransitionRunCapture onTransitionStart onTransitionStartCapture Reproduction: // All of these trigger "Unknown property" warnings: <div onTransitionCancel={() => {}} /> <div onTransitionCancelCapture={() => {}} /> <div onTransitionRun={() => {}} /> <div onTransitionRunCapture={() => {}} /> <div onTransitionStart={() => {}} /> <div onTransitionStartCapture={() => {}} /> These should be added to t