From bc7be70077ff08aba75dd915136db12fe8419b54 Mon Sep 17 00:00:00 2001
From: dalaoshu <laipichan@qq.com>
Date: Thu, 5 Sep 2024 21:20:55 +0800
Subject: [PATCH] chore(linter/react_perf): improve docs for react_perf rules
 (#5481)

Please fill in the "why this is bad" section

_Originally posted by @DonIsaac in
https://github.com/oxc-project/oxc/pull/5360#discussion_r1739617907_
---
 .../rules/react_perf/jsx_no_jsx_as_prop.rs    | 17 ++++++++++++---
 .../react_perf/jsx_no_new_array_as_prop.rs    | 21 ++++++++++++++-----
 .../react_perf/jsx_no_new_function_as_prop.rs | 19 ++++++++++++++---
 .../react_perf/jsx_no_new_object_as_prop.rs   | 21 +++++++++++++++----
 4 files changed, 63 insertions(+), 15 deletions(-)

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 7d2db1f47..16ddad733 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
     /// <Item jsx={<SubItem />} />
     /// <Item jsx={this.props.jsx || <SubItem />} />
     /// <Item jsx={this.props.jsx ? this.props.jsx : <SubItem />} />
+    /// ```
     ///
-    /// // Good
+    /// Examples of **correct** code for this rule:
+    /// ```jsx
     /// <Item callback={this.props.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 78eed2fb1..e9061738b 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
-    /// ```jsx
-    /// // Bad
-    /// <Item list={[]} />
     ///
+    /// Examples of **incorrect** code for this rule:
+    /// ```jsx
+    /// <Item list={[]} />
     /// <Item list={new Array()} />
     /// <Item list={Array()} />
     /// <Item list={this.props.list || []} />
     /// <Item list={this.props.list ? this.props.list : []} />
+    /// ```
     ///
-    /// // Good
+    /// Examples of **correct** code for this rule:
+    /// ```jsx
     /// <Item list={this.props.list} />
     /// ```
     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 12fa18aa5..bb02250e1 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
     /// <Item callback={new Function(...)} />
     /// <Item callback={this.props.callback || function() {}} />
+    /// ```
     ///
-    /// // Good
+    /// Examples of **correct** code for this rule:
+    /// ```jsx
     /// <Item callback={this.props.callback} />
     /// ```
     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 122df3b7b..c8e2c8184 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
     /// <Item config={{}} />
     /// <Item config={new Object()} />
     /// <Item config={Object()} />
     /// <Item config={this.props.config || {}} />
     /// <Item config={this.props.config ? this.props.config : {}} />
-    // <div style={{display: 'none'}} />
+    /// <div style={{display: 'none'}} />
+    /// ```
     ///
-    /// // Good
+    /// Examples of **correct** code for this rule:
+    /// ```jsx
     /// <Item config={staticConfig} />
     /// ```
     JsxNoNewObjectAsProp,