linter: Add react/no-clone-element rule. #20105
Description
This rule would be a port of @eslint-react/no-clone-element, for the same reasons as the rule for preventing React.Children usage (#20015).
Basically, cloneElement is a legacy pattern that is discouraged for modern React code. It should generally be a lint violation to use it.
There is currently no equivalent rule in eslint-plugin-react, which is why I'm proposing this separately.
Examples of violations:
import { cloneElement } from "react";
const clonedElement = cloneElement(
<Row title="Cabbage">Hello</Row>,
{ isHighlighted: true },
"Goodbye",
);import { cloneElement } from "react";
function Component() {
const element = <div />;
return cloneElement(element, { isHighlighted: true });
return null
}import React, { cloneElement } from 'react';
const element = <div />;
const clonedElement = cloneElement(element);import React from 'react';
const element = <div />;
const clonedElement = React.cloneElement(element);import React from 'react';
const clonedElement = React.cloneElement(<div />);Resources:
Metadata
Metadata
Assignees
Labels
Type
Fields
Give feedbackPriority
None yet
Start date
None yet
Target date
None yet
Effort
None yet