chore(linter/react_perf): improve docs for react_perf rules

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,

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
     /// <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,

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,

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,