docs: improve rule docs for setState in effect hooks

Author: Rel1cx

packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-direct-set-state-in-use-effect.md

@@ -28,7 +28,41 @@ react-hooks-extra/no-direct-set-state-in-use-effect
 
 Disallow **direct** calls to the [`set` function](https://react.dev/reference/react/useState#setstate) of `useState` in `useEffect`.
 
-This rule only checks for **direct** calls to the `set` function of `useState` in `useEffect`. It does not check for calls to `set` function in callbacks, event handlers, or `Promise.then` functions.
+## Why this rule exists
+
+Directly setting state in `useEffect` can lead to:
+
+- **Redundant state**: You might be duplicating derived values that could be computed during render.
+- **Unnecessary effects**: Triggering re-renders that could be avoided.
+- **Confusing logic**: It can make component behavior harder to reason about.
+
+## What counts as a violation?
+
+This is **not allowed**:
+
+```tsx
+useEffect(() => {
+  setFullName(firstName + " " + lastName);
+}, [firstName, lastName]);
+```
+
+Instead, compute the value during render:
+
+```tsx
+const fullName = firstName + " " + lastName;
+```
+
+## What is allowed?
+
+The rule **does not flag** indirect calls, such as:
+
+- Inside event handlers.
+- Inside `async` functions.
+- Inside `setTimeout`, `setInterval`, `Promise.then`, etc.
+
+## Known limitations
+
+- It doesn’t check `set` calls in `useEffect` cleanup functions.
 
 ## Examples
 
@@ -246,13 +280,6 @@ function List({ items }) {
 }
 ```
 
-## Known limitations
-
-- The `set` call to `useState` in the `cleanup` function of `useEffect` will not be checked.
-- The current implementation does not support determining whether a `set` function called in an `async` function is actually at least one `await` after.
-
-The limitation may be lifted in the future.
-
 ## Implementation
 
 - [Rule source](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-direct-set-state-in-use-effect.ts)

packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-direct-set-state-in-use-layout-effect.md

@@ -22,7 +22,41 @@ react-hooks-extra/no-direct-set-state-in-use-layout-effect
 
 Disallow **direct** calls to the [`set` function](https://react.dev/reference/react/useState#setstate) of `useState` in `useLayoutEffect`.
 
-This rule only checks for **direct** calls to the `set` function of `useState` in `useEffect`. It does not check for calls to `set` function in callbacks, event handlers, or `Promise.then` functions.
+## Why this rule exists
+
+Directly setting state in `useLayoutEffect` can lead to:
+
+- **Redundant state**: You might be duplicating derived values that could be computed during render.
+- **Unnecessary effects**: Triggering re-renders that could be avoided.
+- **Confusing logic**: It can make component behavior harder to reason about.
+
+## What counts as a violation?
+
+This is **not allowed**:
+
+```tsx
+useLayoutEffect(() => {
+  setFullName(firstName + " " + lastName);
+}, [firstName, lastName]);
+```
+
+Instead, compute the value during render:
+
+```tsx
+const fullName = firstName + " " + lastName;
+```
+
+## What is allowed?
+
+The rule **does not flag** indirect calls, such as:
+
+- Inside event handlers.
+- Inside `async` functions.
+- Inside `setTimeout`, `setInterval`, `Promise.then`, etc.
+
+## Known limitations
+
+- It doesn’t check `set` calls in `useLayoutEffect` cleanup functions.
 
 ## Examples
 
@@ -240,13 +274,6 @@ function List({ items }) {
 }
 ```
 
-## Known limitations
-
-- The `set` call to `useState` in the `cleanup` function of `useLayoutEffect` will not be checked.
-- The current implementation does not support determining whether a `set` function called in an `async` function is actually at least one `await` after.
-
-The limitation may be lifted in the future.
-
 ## Implementation
 
 - [Rule source](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/no-direct-set-state-in-use-layout-effect.ts)