docs: minor improvements

Rel1cx · Rel1cx · commit 01a86a2016dc · 2024-12-22T21:30:34.000+08:00
diff --git a/website/pages/docs/rules/dom-no-dangerously-set-innerhtml-with-children.md b/website/pages/docs/rules/dom-no-dangerously-set-innerhtml-with-children.md
@@ -33,8 +33,6 @@ react-dom/no-dangerously-set-innerhtml-with-children
 
 Disallows `DOM element` using `children` and `dangerouslySetInnerHTML` at the same time.
 
-## Why is this bad?
-
 When using `dangerouslySetInnerHTML`, the content of the DOM element is set from the `__html` property. The content of the DOM element is completely replaced, so the children will not be rendered as expected.
 
 ## Examples
diff --git a/website/pages/docs/rules/dom-no-dangerously-set-innerhtml.md b/website/pages/docs/rules/dom-no-dangerously-set-innerhtml.md
@@ -29,8 +29,6 @@ react-dom/no-dangerously-set-innerhtml
 
 Warns when using `dangerouslySetInnerHTML`.
 
-## Why is this bad?
-
 This should be used with extreme caution! If the HTML inside isn’t trusted (for example, if it’s based on user data), you risk introducing an [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) vulnerability.
 
 Read more about using [dangerouslySetInnerHTML](https://react.dev/reference/react-dom/components/common#dangerously-setting-the-inner-html).
diff --git a/website/pages/docs/rules/dom-no-find-dom-node.md b/website/pages/docs/rules/dom-no-find-dom-node.md
@@ -33,8 +33,6 @@ react-dom/no-find-dom-node
 
 This rule disallows the use of `findDOMNode`.
 
-## Why is this bad?
-
 This API will be removed in a future major version of React. [See the alternatives](https://react.dev/reference/react-dom/findDOMNode#alternatives).
 
 ## Examples
diff --git a/website/pages/docs/rules/dom-no-missing-button-type.md b/website/pages/docs/rules/dom-no-missing-button-type.md
@@ -33,8 +33,6 @@ react-dom/no-missing-button-type
 
 Enforces explicit `type` attribute for `<button>` elements.
 
-## Why is this bad?
-
 The `type` attribute of the `button` element needs to be specified. The default value is `type="submit"`, which can easily lead to unexpected behavior, especially when used in a form.
 
 ## Examples
diff --git a/website/pages/docs/rules/dom-no-missing-iframe-sandbox.md b/website/pages/docs/rules/dom-no-missing-iframe-sandbox.md
@@ -33,8 +33,6 @@ react-dom/no-missing-iframe-sandbox
 
 Enforces explicit `sandbox` attribute for `iframe` elements.
 
-## Why is this bad?
-
 The sandbox attribute enables an extra set of restrictions for the content in the iframe. Using sandbox attribute is considered a good security practice.
 
 ## Examples
diff --git a/website/pages/docs/rules/dom-no-namespace.md b/website/pages/docs/rules/dom-no-namespace.md
@@ -33,8 +33,6 @@ react-dom/no-namespace
 
 Enforces the absence of a `namespace` in React elements.
 
-## Why is this bad?
-
 Namespaces, such as with `svg:circle` are not supported in React.
 
 ## Examples
diff --git a/website/pages/docs/rules/dom-no-render-return-value.md b/website/pages/docs/rules/dom-no-render-return-value.md
@@ -33,8 +33,6 @@ react-dom/no-render-return-value
 
 Prevents usage of the return value of `ReactDOM.render`.
 
-## Why is this bad?
-
 `ReactDOM.render()` currently returns a reference to the root ReactComponent instance. However, using this return value is legacy and should be avoided because future versions of React may render components asynchronously in some cases. If you need a reference to the root ReactComponent instance, the preferred solution is to attach a [callback ref](https://react.dev/learn/manipulating-the-dom-with-refs) to the root element.
 
 ## Examples
diff --git a/website/pages/docs/rules/dom-no-script-url.md b/website/pages/docs/rules/dom-no-script-url.md
@@ -33,8 +33,6 @@ react-dom/no-script-url
 
 Prevents usage of `javascript:` URLs as the value of certain attributes.
 
-## Why is this bad?
-
 `javascript:` URLs are a form of [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting) attack. They allow an attacker to execute arbitrary JavaScript in the context of your website, which can be used to steal user data, deface your website, or perform other malicious actions.
 
 ## Examples
diff --git a/website/pages/docs/rules/dom-no-unsafe-iframe-sandbox.md b/website/pages/docs/rules/dom-no-unsafe-iframe-sandbox.md
@@ -33,8 +33,6 @@ react-dom/no-unsafe-iframe-sandbox
 
 Enforces `sandbox` attribute for `iframe` elements is not set to unsafe combinations.
 
-## Why is this bad?
-
 If `sandbox` attribute is not set, the iframe content can have abilities that are not intended to be allowed.
 
 ## Examples
diff --git a/website/pages/docs/rules/dom-no-void-elements-with-children.md b/website/pages/docs/rules/dom-no-void-elements-with-children.md
@@ -33,8 +33,6 @@ react-dom/no-void-elements-with-children
 
 Prevents the use of `children` in void `DOM elements`.
 
-## Why is this bad?
-
 Self-closing HTML elements (e.g. `<img />`, `<br />`, `<hr />`) are collectively known as void DOM elements. React will give you a warning if you try to give these children:
 
 > Invariant Violation: img is a void element tag and must neither have children nor use dangerouslySetInnerHTML.
diff --git a/website/pages/docs/rules/ensure-forward-ref-using-ref.md b/website/pages/docs/rules/ensure-forward-ref-using-ref.md
@@ -35,8 +35,6 @@ Requires that components wrapped with `forwardRef` must have a `ref` parameter.
 
 This rule checks all React components using `forwardRef` and verifies that there is a second parameter.
 
-## Why is this bad?
-
 Omitting the `ref` argument is usually a bug, and components not using `ref` don't need to be wrapped by `forwardRef`.
 
 ## Examples
diff --git a/website/pages/docs/rules/hooks-extra-no-unnecessary-use-callback.md b/website/pages/docs/rules/hooks-extra-no-unnecessary-use-callback.md
@@ -26,8 +26,6 @@ react-hooks-extra/no-unnecessary-use-callback
 
 Disallows unnecessary usage of `useCallback`.
 
-## Why is this bad?
-
 React Hooks `useCallback` has empty dependencies array like what's in the examples, are unnecessary. The hook can be removed and it's value can be created in the component body or hoisted to the outer scope of the component.
 
 ## Examples
diff --git a/website/pages/docs/rules/hooks-extra-no-unnecessary-use-memo.md b/website/pages/docs/rules/hooks-extra-no-unnecessary-use-memo.md
@@ -26,8 +26,6 @@ react-hooks-extra/no-unnecessary-use-memo
 
 Disallows unnecessary usage of `useMemo`.
 
-## Why is this bad?
-
 React Hooks `useMemo` has empty dependencies array like what's in the examples, are unnecessary. The hook can be removed and it's value can be calculated in the component body or hoisted to the outer scope of the component.
 
 ## Examples
diff --git a/website/pages/docs/rules/hooks-extra-prefer-use-state-lazy-initialization.md b/website/pages/docs/rules/hooks-extra-prefer-use-state-lazy-initialization.md
@@ -32,8 +32,6 @@ react-hooks-extra/prefer-use-state-lazy-initialization
 
 Warns function calls made inside `useState` calls.
 
-## Why is this bad?
-
 A function can be invoked inside a useState call to help create its initial state. However, subsequent renders will still invoke the function while discarding its return value. This is wasteful and can cause performance issues if the function call is expensive.
 
 To combat this issue React allows useState calls to use an [initializer function](https://react.dev/reference/react/useState#avoiding-recreating-the-initial-state) which will only be called on the first render.
diff --git a/website/pages/docs/rules/no-access-state-in-setstate.md b/website/pages/docs/rules/no-access-state-in-setstate.md
@@ -33,8 +33,6 @@ react-x/no-access-state-in-setstate
 
 Disallows accessing `this.state` inside `setState` calls.
 
-## Why is this bad?
-
 Usage of `this.state` inside `setState` calls might result in errors when two state calls are called in batch and thus referencing old state and not the current state.
 
 ## Examples
diff --git a/website/pages/docs/rules/no-array-index-key.md b/website/pages/docs/rules/no-array-index-key.md
@@ -33,8 +33,6 @@ react-x/no-array-index-key
 
 Warns when an array `index` is used as a `key` prop.
 
-## Why is this bad?
-
 The order of items in a list rendering can change over time if an item is inserted, deleted, or the array is reordered. Indexes as keys often lead to subtle and confusing errors.
 
 ## Examples
diff --git a/website/pages/docs/rules/no-children-count.md b/website/pages/docs/rules/no-children-count.md
@@ -33,8 +33,6 @@ react-x/no-children-count
 
 Prevents the use of `Children.count` from the `react` package.
 
-## Why is this bad?
-
 Using `Children` is uncommon and can lead to fragile code. [See common alternatives](https://react.dev/reference/react/Children#alternatives).
 
 ## Examples
diff --git a/website/pages/docs/rules/no-children-for-each.md b/website/pages/docs/rules/no-children-for-each.md
@@ -33,8 +33,6 @@ react-x/no-children-for-each
 
 Prevents the use of `Children.forEach` from the `react` package.
 
-## Why is this bad?
-
 Using `Children` is uncommon and can lead to fragile code. [See common alternatives](https://react.dev/reference/react/Children#alternatives).
 
 ## Examples
diff --git a/website/pages/docs/rules/no-children-map.md b/website/pages/docs/rules/no-children-map.md
@@ -33,8 +33,6 @@ react-x/no-children-map
 
 Prevents the use of `Children.map` from the `react` package.
 
-## Why is this bad?
-
 Using `Children` is uncommon and can lead to fragile code. [See common alternatives](https://react.dev/reference/react/Children#alternatives).
 
 ## Examples
diff --git a/website/pages/docs/rules/no-children-only.md b/website/pages/docs/rules/no-children-only.md
@@ -33,8 +33,6 @@ react-x/no-children-only
 
 Prevents the use of `Children.only` from the `react` package.
 
-## Why is this bad?
-
 Using `Children` is uncommon and can lead to fragile code. [See common alternatives](https://react.dev/reference/react/Children#alternatives).
 
 ## Examples
diff --git a/website/pages/docs/rules/no-children-prop.md b/website/pages/docs/rules/no-children-prop.md
@@ -33,8 +33,6 @@ react-x/no-children-prop
 
 Disallows passing 'children' as a prop.
 
-## Why is this bad?
-
 Most of the time, `children` should be actual `children`, not passed in as a `prop`.
 
 When using JSX, the `children` should be nested between the opening and closing tags. When not using JSX, the `children` should be passed as additional arguments to `React.createElement`.
diff --git a/website/pages/docs/rules/no-children-to-array.md b/website/pages/docs/rules/no-children-to-array.md
@@ -33,8 +33,6 @@ react-x/no-children-to-array
 
 Prevents the use of `Children.toArray` from the `react` package.
 
-## Why is this bad?
-
 Using `Children.toArray` is uncommon and can lead to fragile code. [See common alternatives](https://react.dev/reference/react/Children#alternatives).
 
 ## Examples
diff --git a/website/pages/docs/rules/no-class-component.md b/website/pages/docs/rules/no-class-component.md
@@ -33,8 +33,6 @@ react-x/no-class-component
 
 Prevents the use of class components.
 
-## Why is this bad?
-
 Component is the base class for the React components defined as JavaScript classes. Class components are still supported by React, but we don’t recommend using them in new code.
 
 It is recommended to define components as functions instead of classes. [See how to migrate](https://react.dev/reference/react/Component#alternatives).
diff --git a/website/pages/docs/rules/no-clone-element.md b/website/pages/docs/rules/no-clone-element.md
@@ -33,8 +33,6 @@ react-x/no-clone-element
 
 Disallows the use of `cloneElement`.
 
-## Why is this bad?
-
 Using cloneElement is uncommon and can lead to fragile code. This also makes it harder to trace the data flow. Try the [alternatives](https://react.dev/reference/react/cloneElement#alternatives) instead.
 
 ## Examples
diff --git a/website/pages/docs/rules/no-comment-textnodes.md b/website/pages/docs/rules/no-comment-textnodes.md
@@ -33,8 +33,6 @@ react-x/no-comment-textnodes
 
 Prevents comment strings (e.g. beginning with `//` or `/*`) from being accidentally inserted into the JSX element's textnodes.
 
-## Why is this bad?
-
 This could be a mistake during code editing or it could be a misunderstanding of how JSX works. Either way, it's probably not what you intended.
 
 ## Examples
diff --git a/website/pages/docs/rules/no-component-will-mount.md b/website/pages/docs/rules/no-component-will-mount.md
@@ -33,8 +33,6 @@ react-x/no-component-will-mount
 
 Prevents usage of `componentWillMount` in class components.
 
-## Why is this bad?
-
 This API has been renamed from `componentWillMount` to `UNSAFE_componentWillMount`. The old name has been deprecated. In a future major version of React, only the new name will work.
 
 ## Examples
diff --git a/website/pages/docs/rules/no-component-will-receive-props.md b/website/pages/docs/rules/no-component-will-receive-props.md
@@ -33,8 +33,6 @@ react-x/no-component-will-receive-props
 
 Prevents usage of `componentWillReceiveProps` in class components.
 
-## Why is this bad?
-
 This API has been renamed from `componentWillReceiveProps` to `UNSAFE_componentWillReceiveProps`. The old name has been deprecated. In a future major version of React, only the new name will work.
 
 ## Examples
diff --git a/website/pages/docs/rules/no-component-will-update.md b/website/pages/docs/rules/no-component-will-update.md
@@ -33,8 +33,6 @@ react-x/no-component-will-update
 
 Prevents usage of `componentWillUpdate` in class components.
 
-## Why is this bad?
-
 This API has been renamed from `componentWillUpdate` to `UNSAFE_componentWillUpdate`. The old name has been deprecated. In a future major version of React, only the new name will work.
 
 ## Examples
diff --git a/website/pages/docs/rules/no-context-provider.md b/website/pages/docs/rules/no-context-provider.md
@@ -33,8 +33,6 @@ react-x/no-context-provider
 
 Disallows using `<Context.Provider>`.
 
-## Why is this bad?
-
 In React 19, you can render `<Context>` as a provider instead of `<Context.Provider>`.
 
 ## Examples
diff --git a/website/pages/docs/rules/no-create-ref.md b/website/pages/docs/rules/no-create-ref.md
@@ -33,8 +33,6 @@ react-x/no-create-ref
 
 Prevents usage of `createRef()` in function components.
 
-## Why is this bad?
-
 `createRef()` is a legacy API that is not recommended for use in new code. Instead, prefer using `useRef()` with function components.
 
 ## Examples
diff --git a/website/pages/docs/rules/no-default-props.md b/website/pages/docs/rules/no-default-props.md
@@ -33,8 +33,6 @@ react-x/no-default-props
 
 Disallows using `defaultProps` property in favor of ES6 default parameters.
 
-## Why is this bad?
-
 The `defaultProps` will be removed from functional components in React 19 in place of ES6 default parameters. If you’re using `defaultProps`, it is recommend to migrate to ES6 default parameters.
 
 ## Examples
diff --git a/website/pages/docs/rules/no-direct-mutation-state.md b/website/pages/docs/rules/no-direct-mutation-state.md
@@ -33,8 +33,6 @@ react-x/no-direct-mutation-state
 
 Disallows direct mutation of `this.state`.
 
-## Why is this bad?
-
 NEVER mutate `this.state` directly, as calling `setState()` afterwards may replace the mutation you made. Treat `this.state` as if it were immutable.
 
 The only place that's acceptable to assign `this.state` is in a class component's `constructor`.
diff --git a/website/pages/docs/rules/no-duplicate-key.md b/website/pages/docs/rules/no-duplicate-key.md
@@ -33,8 +33,6 @@ react-x/no-duplicate-key
 
 Prevents duplicate `key` on elements in the same array or a list of `children`.
 
-## Why is this bad?
-
 React uses keys to identify elements in an array. If two elements have the same key, React will not be able to distinguish them. This can lead to issues with state and rendering.
 
 ## Examples
diff --git a/website/pages/docs/rules/no-forward-ref.md b/website/pages/docs/rules/no-forward-ref.md
@@ -33,8 +33,6 @@ react-x/no-forward-ref
 
 Disallows using `React.forwardRef`.
 
-## Why is this bad?
-
 In React 19, `forwardRef` is no longer necessary. Pass `ref` as a prop instead.
 
 `forwardRef` will deprecated in a future release. Learn more [here](https://react.dev/blog/2024/12/05/react-19#ref-as-a-prop).
diff --git a/website/pages/docs/rules/no-implicit-key.md b/website/pages/docs/rules/no-implicit-key.md
@@ -33,8 +33,6 @@ react-x/no-implicit-key
 
 Prevents `key` from not being explicitly specified (e.g. spreading `key` from objects).
 
-## Why is this bad?
-
 This makes it hard to see if the key was passed correctly to the element or where it came from.
 
 And it's also be proposed to be deprecated is this RFC: [Deprecate spreading key from objects](https://github.com/reactjs/rfcs/pull/107#issue-413235149)
diff --git a/website/pages/docs/rules/no-leaked-conditional-rendering.md b/website/pages/docs/rules/no-leaked-conditional-rendering.md
@@ -30,8 +30,6 @@ react-x/no-leaked-conditional-rendering
 
 Prevents problematic leaked values from being rendered.
 
-## Why is this bad?
-
 Using the `&&` operator to render some element conditionally in JSX can cause unexpected values being rendered, or even crashing the rendering.
 
 ## Examples
diff --git a/website/pages/docs/rules/no-missing-component-display-name.md b/website/pages/docs/rules/no-missing-component-display-name.md
@@ -26,8 +26,6 @@ react-x/no-missing-component-display-name
 
 Enforces that all components have a `displayName` or `name` which React can use as its `displayName` in devtools.
 
-## Why is this bad?
-
 When defining a React component, if you specify its component name in a way that React can't infer its `displayName`, it will show up as an `anonymous` component in devtools, which makes debugging more difficult.
 
 ## Examples
diff --git a/website/pages/docs/rules/no-missing-key.md b/website/pages/docs/rules/no-missing-key.md
@@ -33,8 +33,6 @@ react-x/no-missing-key
 
 Prevents missing `key` on items in list rendering.
 
-## Why is this bad?
-
 React needs keys to identify items in the list. If you don’t specify a key, React will use the array index as a key, which often leads to subtle and confusing bugs.
 
 ## Examples
diff --git a/website/pages/docs/rules/no-nested-components.md b/website/pages/docs/rules/no-nested-components.md
@@ -33,8 +33,6 @@ react-x/no-nested-components
 
 Prevents nesting component definitions inside other components.
 
-## Why is this bad?
-
 Nesting component definitions inside other components is a common mistake that can be extremely slow and cause issues and bugs, and the state of components defined during rendering will not be preserved by React. Instead, define every component at the top level.
 
 ## Examples
diff --git a/website/pages/docs/rules/no-prop-types.md b/website/pages/docs/rules/no-prop-types.md
@@ -33,8 +33,6 @@ react-x/no-prop-types
 
 Disallows using `propTypes` property in favor of TypeScript or another type-checking solution.
 
-## Why is this bad?
-
 `PropTypes` were deprecated in [April 2017 (v15.5.0)](https://legacy.reactjs.org/blog/2017/04/07/react-v15.5.0.html#new-deprecation-warnings).
 
 The `propType` checks will be removed from the React package, and using them will be silently ignored. If you’re using `propTypes`, it is recommend to migrate to TypeScript or another type-checking solution.
diff --git a/website/pages/docs/rules/no-redundant-should-component-update.md b/website/pages/docs/rules/no-redundant-should-component-update.md
@@ -33,8 +33,6 @@ react-x/no-redundant-should-component-update
 
 Prevents usage of `shouldComponentUpdate` when extending `React.PureComponent`.
 
-## Why is this bad?
-
 While having `shouldComponentUpdate` will still work, it becomes pointless to extend `React.PureComponent`.
 
 ## Examples
diff --git a/website/pages/docs/rules/no-set-state-in-component-did-mount.md b/website/pages/docs/rules/no-set-state-in-component-did-mount.md
@@ -33,8 +33,6 @@ react-x/no-set-state-in-component-did-mount
 
 Disallows calling `this.setState` in `componentDidMount` outside of functions, such as callbacks.
 
-## Why is this bad?
-
 Updating the state after a component mount will trigger a second `render()` call and can lead to property/layout thrashing.
 
 ## Examples
diff --git a/website/pages/docs/rules/no-set-state-in-component-did-update.md b/website/pages/docs/rules/no-set-state-in-component-did-update.md
@@ -33,8 +33,6 @@ react-x/no-set-state-in-component-did-update
 
 Disallows calling `this.setState` in `componentDidUpdate` outside of functions, such as callbacks.
 
-## Why is this bad?
-
 Updating the state after a component mount will trigger a second `render()` call and can lead to property/layout thrashing.
 
 ## Examples
diff --git a/website/pages/docs/rules/no-set-state-in-component-will-update.md b/website/pages/docs/rules/no-set-state-in-component-will-update.md
@@ -33,8 +33,6 @@ react-x/no-set-state-in-component-will-update
 
 Disallows calling `this.setState` in `componentWillUpdate` outside of functions, such as callbacks.
 
-## Why is this bad?
-
 Updating the state after a component mount will trigger a second `render()` call and can lead to property/layout thrashing.
 
 ## Examples
diff --git a/website/pages/docs/rules/no-string-refs.md b/website/pages/docs/rules/no-string-refs.md
diff --git a/website/pages/docs/rules/no-unsafe-component-will-mount.md b/website/pages/docs/rules/no-unsafe-component-will-mount.md
diff --git a/website/pages/docs/rules/no-unsafe-component-will-receive-props.md b/website/pages/docs/rules/no-unsafe-component-will-receive-props.md
diff --git a/website/pages/docs/rules/no-unsafe-component-will-update.md b/website/pages/docs/rules/no-unsafe-component-will-update.md
diff --git a/website/pages/docs/rules/no-unstable-context-value.md b/website/pages/docs/rules/no-unstable-context-value.md
diff --git a/website/pages/docs/rules/no-unstable-default-props.md b/website/pages/docs/rules/no-unstable-default-props.md
diff --git a/website/pages/docs/rules/no-useless-fragment.md b/website/pages/docs/rules/no-useless-fragment.md
diff --git a/website/pages/docs/rules/prefer-read-only-props.md b/website/pages/docs/rules/prefer-read-only-props.md
diff --git a/website/pages/docs/rules/web-api-no-leaked-event-listener.md b/website/pages/docs/rules/web-api-no-leaked-event-listener.md
diff --git a/website/pages/docs/rules/web-api-no-leaked-interval.md b/website/pages/docs/rules/web-api-no-leaked-interval.md
diff --git a/website/pages/docs/rules/web-api-no-leaked-resize-observer.md b/website/pages/docs/rules/web-api-no-leaked-resize-observer.md
diff --git a/website/pages/docs/rules/web-api-no-leaked-timeout.md b/website/pages/docs/rules/web-api-no-leaked-timeout.md
