, document.body);
## Further Reading
-- [React: react-dom/render](https://18.react.dev/reference/react-dom/render)
+- [React DOM `render`](https://18.react.dev/reference/react-dom/render)
---
diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-render.md b/packages/plugins/eslint-plugin-react-dom/src/rules/no-render.md
index 9e110178a2..6c5f8152f2 100644
--- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-render.md
+++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-render.md
@@ -56,8 +56,8 @@ createRoot(document.getElementById("app")).render();
## Further Reading
-- [React: react-dom/render](https://18.react.dev/reference/react-dom/render)
-- [React: react-dom/createRoot](https://react.dev/reference/react-dom/client/createRoot)
+- [React DOM `render`](https://18.react.dev/reference/react-dom/render)
+- [React DOM `createRoot`](https://react.dev/reference/react-dom/client/createRoot)
---
diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-unsafe-iframe-sandbox.md b/packages/plugins/eslint-plugin-react-dom/src/rules/no-unsafe-iframe-sandbox.md
index d8c9972a1a..fe274210a3 100644
--- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-unsafe-iframe-sandbox.md
+++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-unsafe-iframe-sandbox.md
@@ -61,7 +61,7 @@ function MyComponent() {
## Further Reading
-- [MDN: iframe - sandbox](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attributes)
+- [MDN: `iframe` `sandbox`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attributes)
---
diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-use-form-state.md b/packages/plugins/eslint-plugin-react-dom/src/rules/no-use-form-state.md
index 61262b51af..a89b9cdaae 100644
--- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-use-form-state.md
+++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-use-form-state.md
@@ -78,4 +78,4 @@ function StatefulForm({}) {
## Further Reading
-- [React: useActionState](https://react.dev/reference/react/useActionState)
+- [React `useActionState` Hook](https://react.dev/reference/react/useActionState)
diff --git a/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-direct-set-state-in-use-effect.md b/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-direct-set-state-in-use-effect.md
index 3e305f3a45..5be3234a7d 100644
--- a/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-direct-set-state-in-use-effect.md
+++ b/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-direct-set-state-in-use-effect.md
@@ -94,7 +94,7 @@ export default function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
- const handler = () => setCount(c => c + 1);
+ const handler = () => setCount((c) => c + 1);
window.addEventListener("click", handler);
return () => window.removeEventListener("click", handler);
}, []);
@@ -113,7 +113,7 @@ export default function Counter() {
useEffect(() => {
const intervalId = setInterval(() => {
- setCount(c => c + 1);
+ setCount((c) => c + 1);
}, 1000);
return () => clearInterval(intervalId);
}, []);
@@ -133,8 +133,8 @@ export default function RemoteContent() {
useEffect(() => {
let discarded = false;
fetch("https://eslint-react.xyz/content")
- .then(resp => resp.text())
- .then(text => {
+ .then((resp) => resp.text())
+ .then((text) => {
if (discarded) return;
setContent(text);
});
@@ -207,7 +207,10 @@ import { useMemo, useState } from "react";
function TodoList({ todos, filter }) {
const [newTodo, setNewTodo] = useState("");
// ✅ Does not re-run getFilteredTodos() unless todos or filter change
- const visibleTodos = useMemo(() => getFilteredTodos(todos, filter), [todos, filter]);
+ const visibleTodos = useMemo(
+ () => getFilteredTodos(todos, filter),
+ [todos, filter],
+ );
// ...
}
```
@@ -234,12 +237,7 @@ export default function ProfilePage({ userId }) {
import { useState } from "react";
export default function ProfilePage({ userId }) {
- return (
-
- );
+ return ;
}
function Profile({ userId }) {
@@ -292,7 +290,7 @@ function List({ items }) {
const [isReverse, setIsReverse] = useState(false);
const [selectedId, setSelectedId] = useState(null);
// ✅ Best: Calculate everything during rendering
- const selection = items.find(item => item.id === selectedId) ?? null;
+ const selection = items.find((item) => item.id === selectedId) ?? null;
// ...
}
```
@@ -304,9 +302,9 @@ function List({ items }) {
## Further Reading
-- [React: useState](https://react.dev/reference/react/useState#setstate)
-- [React: useEffect](https://react.dev/reference/react/useEffect)
-- [React: You Might Not Need an Effect](https://react.dev/learn/you-might-not-need-an-effect)
+- [React `useState` Hook](https://react.dev/reference/react/useState)
+- [React `useEffect` Hook](https://react.dev/reference/react/useEffect)
+- [React Docs: You Might Not Need an Effect](https://react.dev/learn/you-might-not-need-an-effect)
---
diff --git a/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-direct-set-state-in-use-layout-effect.md b/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-direct-set-state-in-use-layout-effect.md
index b4102d7558..baf1e689a3 100644
--- a/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-direct-set-state-in-use-layout-effect.md
+++ b/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-direct-set-state-in-use-layout-effect.md
@@ -94,7 +94,7 @@ export default function Counter() {
const [count, setCount] = useState(0);
useLayoutEffect(() => {
- const handler = () => setCount(c => c + 1);
+ const handler = () => setCount((c) => c + 1);
window.addEventListener("click", handler);
return () => window.removeEventListener("click", handler);
}, []);
@@ -113,7 +113,7 @@ export default function Counter() {
useLayoutEffect(() => {
const intervalId = setInterval(() => {
- setCount(c => c + 1);
+ setCount((c) => c + 1);
}, 1000);
return () => clearInterval(intervalId);
}, []);
@@ -133,8 +133,8 @@ export default function RemoteContent() {
useLayoutEffect(() => {
let discarded = false;
fetch("https://eslint-react.xyz/content")
- .then(resp => resp.text())
- .then(text => {
+ .then((resp) => resp.text())
+ .then((text) => {
if (discarded) return;
setContent(text);
});
@@ -207,7 +207,10 @@ import { useMemo, useState } from "react";
function TodoList({ todos, filter }) {
const [newTodo, setNewTodo] = useState("");
// ✅ Does not re-run getFilteredTodos() unless todos or filter change
- const visibleTodos = useMemo(() => getFilteredTodos(todos, filter), [todos, filter]);
+ const visibleTodos = useMemo(
+ () => getFilteredTodos(todos, filter),
+ [todos, filter],
+ );
// ...
}
```
@@ -234,12 +237,7 @@ export default function ProfilePage({ userId }) {
import { useState } from "react";
export default function ProfilePage({ userId }) {
- return (
-
- );
+ return ;
}
function Profile({ userId }) {
@@ -292,7 +290,7 @@ function List({ items }) {
const [isReverse, setIsReverse] = useState(false);
const [selectedId, setSelectedId] = useState(null);
// ✅ Best: Calculate everything during rendering
- const selection = items.find(item => item.id === selectedId) ?? null;
+ const selection = items.find((item) => item.id === selectedId) ?? null;
// ...
}
```
@@ -304,9 +302,9 @@ function List({ items }) {
## Further Reading
-- [React: useState](https://react.dev/reference/react/useState#setstate)
-- [React: useLayoutEffect](https://react.dev/reference/react/useLayoutEffect)
-- [React: You Might Not Need an Effect](https://react.dev/learn/you-might-not-need-an-effect)
+- [React `useState` Hook](https://react.dev/reference/react/useState)
+- [React `useLayoutEffect` Hook](https://react.dev/reference/react/useLayoutEffect)
+- [React Docs: You Might Not Need an Effect](https://react.dev/learn/you-might-not-need-an-effect)
---
diff --git a/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-unnecessary-use-prefix.md b/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-unnecessary-use-prefix.md
index 33e9136ec8..b8c99d524f 100644
--- a/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-unnecessary-use-prefix.md
+++ b/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-unnecessary-use-prefix.md
@@ -121,5 +121,4 @@ function useAuth() {
## Further Reading
-- [React: invalid-hook-call-warning (the first note)](https://react.dev/warnings/invalid-hook-call-warning)
-- [React: should-all-functions-called-during-rendering-start-with-the-use-prefix (the deep dive)](https://react.dev/learn/reusing-logic-with-custom-hooks#should-all-functions-called-during-rendering-start-with-the-use-prefix)
+- [React Docs: Should all functions called during rendering start with the `use` prefix? (the deep dive)](https://react.dev/learn/reusing-logic-with-custom-hooks#should-all-functions-called-during-rendering-start-with-the-use-prefix)
diff --git a/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/prefer-use-state-lazy-initialization.md b/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/prefer-use-state-lazy-initialization.md
index f0ece3a9e3..ccb8e264e7 100644
--- a/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/prefer-use-state-lazy-initialization.md
+++ b/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/prefer-use-state-lazy-initialization.md
@@ -68,4 +68,4 @@ declare function generateTodos(): string[];
## Further Reading
-- [React: useState](https://react.dev/reference/react/useState#setstate)
+- [React `useState` Hook](https://react.dev/reference/react/useState#setstate)
diff --git a/packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-event-listener.md b/packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-event-listener.md
index bd3cf88805..c6ae351bee 100644
--- a/packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-event-listener.md
+++ b/packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-event-listener.md
@@ -188,7 +188,13 @@ import { useEffect } from "react";
function MyComponent() {
useEffect(() => {
- const events = ["mousemove", "mousedown", "keydown", "scroll", "touchstart"];
+ const events = [
+ "mousemove",
+ "mousedown",
+ "keydown",
+ "scroll",
+ "touchstart",
+ ];
const handleActivity = () => {};
events.forEach((event) => {
@@ -254,7 +260,7 @@ function useCustomHook() {
## Further Reading
-- [MDN: EventTarget.addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)
-- [MDN: EventTarget.removeEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener)
-- [React: Subscribing to events](https://react.dev/learn/synchronizing-with-effects#subscribing-to-events)
-- [React: Connecting to an external system](https://react.dev/reference/react/useEffect#connecting-to-an-external-system)
+- [MDN: `EventTarget.addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)
+- [MDN: `EventTarget.removeEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener)
+- [React Docs: Subscribing to events](https://react.dev/learn/synchronizing-with-effects#subscribing-to-events)
+- [React Docs: Connecting to an external system](https://react.dev/reference/react/useEffect#connecting-to-an-external-system)
diff --git a/packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-interval.md b/packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-interval.md
index abf0f91e1d..8030af8e68 100644
--- a/packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-interval.md
+++ b/packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-interval.md
@@ -71,9 +71,9 @@ function MyComponent() {
## Further Reading
-- [MDN: setInterval](https://developer.mozilla.org/en-US/docs/Web/API/setInterval)
-- [MDN: clearInterval](https://developer.mozilla.org/en-US/docs/Web/API/clearInterval)
-- [React: synchronizing with effects](https://react.dev/learn/synchronizing-with-effects#putting-it-all-together)
+- [MDN: `setInterval`](https://developer.mozilla.org/en-US/docs/Web/API/setInterval)
+- [MDN: `clearInterval`](https://developer.mozilla.org/en-US/docs/Web/API/clearInterval)
+- [React Docs: Synchronizing with effects](https://react.dev/learn/synchronizing-with-effects#putting-it-all-together)
---
diff --git a/packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-resize-observer.md b/packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-resize-observer.md
index cb8aa93695..4b6846dc3b 100644
--- a/packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-resize-observer.md
+++ b/packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-resize-observer.md
@@ -75,5 +75,5 @@ function MyComponent() {
## Further Reading
-- [MDN: ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
-- [React: Connecting to an external system](https://react.dev/reference/react/useEffect#connecting-to-an-external-system)
+- [MDN: `ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
+- [React Docs: Connecting to an external system](https://react.dev/reference/react/useEffect#connecting-to-an-external-system)
diff --git a/packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-timeout.md b/packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-timeout.md
index 68593a9d3a..38f0b95e99 100644
--- a/packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-timeout.md
+++ b/packages/plugins/eslint-plugin-react-web-api/src/rules/no-leaked-timeout.md
@@ -71,9 +71,9 @@ function MyComponent() {
## Further Reading
-- [MDN: setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout)
-- [MDN: clearTimeout](https://developer.mozilla.org/en-US/docs/Web/API/clearTimeout)
-- [React: synchronizing with effects](https://react.dev/learn/synchronizing-with-effects#putting-it-all-together)
+- [MDN: `setTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout)
+- [MDN: `clearTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/clearTimeout)
+- [React Docs: Synchronizing with effects](https://react.dev/learn/synchronizing-with-effects#putting-it-all-together)
---
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-array-index-key.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-array-index-key.md
index 6b46cba94c..a69db57b86 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-array-index-key.md
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-array-index-key.md
@@ -76,7 +76,7 @@ function MyComponent({ items }: MyComponentProps) {
## Further Reading
-- [React: Why does React need keys?](https://react.dev/learn/rendering-lists#why-does-react-need-keys)
+- [React Docs: Why does React need keys?](https://react.dev/learn/rendering-lists#why-does-react-need-keys)
---
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-count.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-count.md
index fd1d108761..bd420f121d 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-count.md
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-count.md
@@ -55,7 +55,7 @@ function MyComponent({ children }: MyComponentProps) {
## Further Reading
-- [React: Legacy React APIs Children](https://react.dev/reference/react/Children)
+- [Legacy React APIs `Children`](https://react.dev/reference/react/Children)
---
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-for-each.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-for-each.md
index d8783729b2..0298aa6cf1 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-for-each.md
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-for-each.md
@@ -55,7 +55,7 @@ function MyComponent({ children }: MyComponentProps) {
## Further Reading
-- [React: Legacy React APIs Children](https://react.dev/reference/react/Children)
+- [Legacy React APIs `Children`](https://react.dev/reference/react/Children)
---
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-map.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-map.md
index c961dd89f8..6fd4e4eb78 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-map.md
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-map.md
@@ -54,7 +54,7 @@ function MyComponent({ children }: MyComponentProps) {
## Further Reading
-- [React: Legacy React APIs Children](https://react.dev/reference/react/Children)
+- [Legacy React APIs `Children`](https://react.dev/reference/react/Children)
---
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-only.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-only.md
index c2fae16014..54be4c3ae7 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-only.md
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-only.md
@@ -51,7 +51,7 @@ function MyComponent({ children }: MyComponentProps) {
## Further Reading
-- [React: Legacy React APIs Children](https://react.dev/reference/react/Children)
+- [Legacy React APIs `Children`](https://react.dev/reference/react/Children)
---
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-to-array.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-to-array.md
index 93476d5a87..3218c61af3 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-to-array.md
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-to-array.md
@@ -52,7 +52,7 @@ function MyComponent({ children }: MyComponentProps) {
## Further Reading
-- [React: Legacy React APIs Children](https://react.dev/reference/react/Children)
+- [Legacy React APIs `Children`](https://react.dev/reference/react/Children)
---
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-class-component.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-class-component.md
index ceb7d4f2ba..caf61ba405 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-class-component.md
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-class-component.md
@@ -88,4 +88,4 @@ class ErrorBoundary extends Component {
## Further Reading
-- [React: Legacy React APIs Component](https://react.dev/reference/react/Component)
+- [Legacy React APIs `Component`](https://react.dev/reference/react/Component)
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-clone-element.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-clone-element.md
index e8ddbe9258..caf746f69b 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-clone-element.md
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-clone-element.md
@@ -50,4 +50,4 @@ console.log(clonedElement); // Goodbye
## Further Reading
-- [React: Legacy React APIs cloneElement](https://react.dev/reference/react/cloneElement)
+- [Legacy React APIs `cloneElement`](https://react.dev/reference/react/cloneElement)
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-mount.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-mount.md
index 18f4d5d0be..64a0080caa 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-mount.md
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-mount.md
@@ -72,7 +72,7 @@ class MyComponent extends React.Component {
## Further Reading
-- [React: Legacy React APIs componentWillMount](https://react.dev/reference/react/Component#componentwillmount)
+- [Legacy React APIs `componentWillMount`](https://react.dev/reference/react/Component#componentwillmount)
---
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-receive-props.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-receive-props.md
index b894685f25..6421d39915 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-receive-props.md
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-receive-props.md
@@ -64,7 +64,7 @@ class MyComponent extends React.Component {
## Further Reading
-- [React: Legacy React APIs componentWillReceiveProps](https://react.dev/reference/react/Component#componentwillreceiveprops)
+- [Legacy React APIs `componentWillReceiveProps`](https://react.dev/reference/react/Component#componentwillreceiveprops)
---
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-update.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-update.md
index cef457be29..ce2ad76f20 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-update.md
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-update.md
@@ -64,7 +64,7 @@ class MyComponent extends React.Component {
## Further Reading
-- [React: Legacy React APIs componentWillUpdate](https://react.dev/reference/react/Component#componentwillupdate)
+- [Legacy React APIs `componentWillUpdate`](https://react.dev/reference/react/Component#componentwillupdate)
---
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-context-provider.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-context-provider.md
index 5d01da9d31..a852065399 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-context-provider.md
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-context-provider.md
@@ -72,7 +72,7 @@ function App({ children }) {
## Further Reading
-- [React: `` as a provider](https://react.dev/blog/2024/12/05/react-19#context-as-a-provider)
+- [React Blog: `` as a provider](https://react.dev/blog/2024/12/05/react-19#context-as-a-provider)
---
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-create-ref.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-create-ref.md
index 0b67c5b6f8..6f5388bcd9 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-create-ref.md
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-create-ref.md
@@ -71,7 +71,7 @@ class MyComponent extends React.Component {
## Further Reading
-- [React: Legacy React APIs createRef](https://react.dev/reference/react/createRef)
+- [Legacy React APIs `createRef`](https://react.dev/reference/react/createRef)
---
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-duplicate-key.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-duplicate-key.md
index 6c8d8097d5..7f43773170 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-duplicate-key.md
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-duplicate-key.md
@@ -63,7 +63,11 @@ function MyComponent() {
import React from "react";
function MyComponent() {
- return
{["a", "b"].map((id) =>
{id}
)}
;
+ return (
+
+ {["a", "b"].map((id) =>
{id}
)}
+
+ );
// ^^^^^^^
// - A key must be unique. 'key="1"' is duplicated.
}
@@ -99,7 +103,11 @@ function MyComponent() {
import React from "react";
function MyComponent() {
- return
{["a", "b"].map((id) =>
{id}
)}
;
+ return (
+
+ {["a", "b"].map((id) =>
{id}
)}
+
+ );
}
```
@@ -110,7 +118,7 @@ function MyComponent() {
## Further Reading
-- [React: Why does React need keys?](https://react.dev/learn/rendering-lists#why-does-react-need-keys)
+- [React Docs: Why does React need keys?](https://react.dev/learn/rendering-lists#why-does-react-need-keys)
---
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-forward-ref.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-forward-ref.md
index 557307a6e3..e9d8cca8f5 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-forward-ref.md
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-forward-ref.md
@@ -40,11 +40,9 @@ In React 19, `forwardRef` is no longer necessary. Pass `ref` as a prop instead.
```tsx
import React, { forwardRef } from "react";
-const MyInput = forwardRef(
- function MyInput(props, ref) {
- return ;
- },
-);
+const MyInput = forwardRef(function MyInput(props, ref) {
+ return ;
+});
```
```tsx
@@ -91,13 +89,7 @@ function MyInput({
value,
onChange,
}: MyInputProps & { ref?: React.RefObject | null }) {
- return (
- onChange(e.target.value)}
- />
- );
+ return onChange(e.target.value)} />;
}
```
@@ -108,8 +100,8 @@ function MyInput({
## Further Reading
-- [React: APIs forwardRef](https://react.dev/reference/react/forwardRef)
-- [React: ref as a prop](https://react.dev/blog/2024/12/05/react-19#ref-as-a-prop)
+- [React `forwardRef`](https://react.dev/reference/react/forwardRef)
+- [React Docs: `ref` as a prop](https://react.dev/blog/2024/12/05/react-19#ref-as-a-prop)
---
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-leaked-conditional-rendering.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-leaked-conditional-rendering.md
index d2b3ab9d08..d78c1c46eb 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-leaked-conditional-rendering.md
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-leaked-conditional-rendering.md
@@ -251,7 +251,7 @@ function MyComponent({ items }: MyComponentProps) {
## Further Reading
-- [React: Conditional Rendering](https://react.dev/learn/conditional-rendering)
+- [React Docs: Conditional Rendering](https://react.dev/learn/conditional-rendering)
---
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-key.md b/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-key.md
index d369936dec..31fa1e9187 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-key.md
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-key.md
@@ -41,11 +41,7 @@ interface MyComponentProps {
function MyComponent({ items }: MyComponentProps) {
return (