diff --git a/crates/oxc_linter/src/rules/react_perf/jsx_no_jsx_as_prop.rs b/crates/oxc_linter/src/rules/react_perf/jsx_no_jsx_as_prop.rs index fe70fe4810f09..572451c35582a 100644 --- a/crates/oxc_linter/src/rules/react_perf/jsx_no_jsx_as_prop.rs +++ b/crates/oxc_linter/src/rules/react_perf/jsx_no_jsx_as_prop.rs @@ -10,16 +10,27 @@ pub struct JsxNoJsxAsProp; declare_oxc_lint!( /// ### What it does /// - /// Prevent JSX that are local to the current method from being used as values of JSX props + /// Prevent JSX elements that are local to the current method from being + /// used as values of JSX props. + /// + /// ### Why is this bad? + /// + /// Using locally defined JSX elements as values for props can lead to + /// unintentional re-renders and performance issues. Every time the parent + /// renders, a new instance of the JSX element is created, causing unnecessary + /// re-renders of child components. This also leads to harder-to-maintain code + /// as the component's props are not passed consistently. /// /// ### Example + /// Examples of **incorrect** code for this rule: /// ```jsx - /// // Bad /// } /> /// } /> /// } /> + /// ``` /// - /// // Good + /// Examples of **correct** code for this rule: + /// ```jsx /// /// ``` JsxNoJsxAsProp, diff --git a/crates/oxc_linter/src/rules/react_perf/jsx_no_new_array_as_prop.rs b/crates/oxc_linter/src/rules/react_perf/jsx_no_new_array_as_prop.rs index 3f0f1536f8405..267e88ba0d522 100644 --- a/crates/oxc_linter/src/rules/react_perf/jsx_no_new_array_as_prop.rs +++ b/crates/oxc_linter/src/rules/react_perf/jsx_no_new_array_as_prop.rs @@ -14,19 +14,30 @@ pub struct JsxNoNewArrayAsProp; declare_oxc_lint!( /// ### What it does /// - /// Prevent Arrays that are local to the current method from being used as values of JSX props + /// Prevent Arrays that are local to the current method from being used + /// as values of JSX props. + /// + /// ### Why is this bad? + /// + /// Using locally defined Arrays as values for props can lead to unintentional + /// re-renders and performance issues. Every time the parent component renders, + /// a new instance of the Array is created, causing unnecessary re-renders of + /// child components. This also leads to harder-to-maintain code as the + /// component's props are not passed consistently. /// /// ### Example + /// + /// Examples of **incorrect** code for this rule: /// ```jsx - /// // Bad /// - /// /// /// /// /// + /// ``` /// - /// // Good + /// Examples of **correct** code for this rule: + /// ```jsx /// /// ``` JsxNoNewArrayAsProp, diff --git a/crates/oxc_linter/src/rules/react_perf/jsx_no_new_function_as_prop.rs b/crates/oxc_linter/src/rules/react_perf/jsx_no_new_function_as_prop.rs index eb0625f431779..bb2057447eaa0 100644 --- a/crates/oxc_linter/src/rules/react_perf/jsx_no_new_function_as_prop.rs +++ b/crates/oxc_linter/src/rules/react_perf/jsx_no_new_function_as_prop.rs @@ -14,14 +14,27 @@ pub struct JsxNoNewFunctionAsProp; declare_oxc_lint!( /// ### What it does /// - /// Prevent Functions that are local to the current method from being used as values of JSX props + /// Prevent Functions that are local to the current method from being used + /// as values of JSX props. + /// + /// ### Why is this bad? + /// + /// Using locally defined Functions as values for props can lead to unintentional + /// re-renders and performance issues. Every time the parent component renders, + /// a new instance of the Function is created, causing unnecessary re-renders + /// of child components. This also leads to harder-to-maintain code as the + /// component's props are not passed consistently. + /// /// ### Example + /// + /// Examples of **incorrect** code for this rule: /// ```jsx - /// // Bad /// /// + /// ``` /// - /// // Good + /// Examples of **correct** code for this rule: + /// ```jsx /// /// ``` JsxNoNewFunctionAsProp, diff --git a/crates/oxc_linter/src/rules/react_perf/jsx_no_new_object_as_prop.rs b/crates/oxc_linter/src/rules/react_perf/jsx_no_new_object_as_prop.rs index 3ad8f5e0bd19d..5430c2db9bae9 100644 --- a/crates/oxc_linter/src/rules/react_perf/jsx_no_new_object_as_prop.rs +++ b/crates/oxc_linter/src/rules/react_perf/jsx_no_new_object_as_prop.rs @@ -14,18 +14,31 @@ pub struct JsxNoNewObjectAsProp; declare_oxc_lint!( /// ### What it does /// - /// Prevent Objects that are local to the current method from being used as values of JSX props + /// Prevent Objects that are local to the current method from being used + /// as values of JSX props. /// + /// ### Why is this bad? + /// + /// Using locally defined Objects as values for props can lead to unintentional + /// re-renders and performance issues. Every time the parent component renders, + /// a new instance of the Object is created, causing unnecessary re-renders of + /// child components. This also leads to harder-to-maintain code as the + /// component's props are not passed consistently. + /// + /// ### Examples + /// + /// Examples of **incorrect** code for this rule: /// ```jsx - /// // Bad /// /// /// /// /// - //
+ ///
+ /// ``` /// - /// // Good + /// Examples of **correct** code for this rule: + /// ```jsx /// /// ``` JsxNoNewObjectAsProp,