docs: compare with set-state-in-effect

Author: NickvanDyke

README.md

@@ -1,6 +1,21 @@
 # ESLint - React - You Might Not Need An Effect
 
-ESLint plugin to catch [unnecessary React `useEffect`s](https://react.dev/learn/you-might-not-need-an-effect) to make your code easier to follow, faster to run, and less error-prone. Highly recommended for new React developers as you learn its mental model, and even experienced developers may be surprised.
+ESLint plugin to catch [unnecessary React `useEffect`s](https://react.dev/learn/you-might-not-need-an-effect) to make your code easier to follow, faster to run, and less error-prone.
+
+Highly recommended for new React developers as you learn its mental model, and even experienced developers may be surprised!
+
+## 🆚 Comparison
+
+The new [`eslint-plugin-react-hooks/set-state-in-effect`](https://react.dev/reference/eslint-plugin-react-hooks/lints/set-state-in-effect) flags synchronous `setState` calls inside effects, helping prevent unnecessary re-renders. Often, this means you don’t need an effect at all!
+
+However, unnecessary effects aren’t limited to synchronous `setState` calls. In contrast, `eslint-plugin-react-you-might-not-need-an-effect`:
+
+1. Reports specific anti-patterns, providing actionable suggestions and links.
+2. Covers more than the documented [You Might Not Need An Effect](https://react.dev/learn/you-might-not-need-an-effect) cases.
+3. Analyzes props and refs — the other half of using React internals in effects.
+4. Considers effects' dependencies, since when the effect runs influences its impact.
+5. Incorporates advanced heuristics to minimize false negatives and false positives.
+6. Obsesses over unusual logic and syntax — because you never know what might end up in an effect.
 
 ## 📦 Installation
 
@@ -86,6 +101,20 @@ function Form() {
 }
 ```
 
+Disallow storing state derived from *any* state (even external) when the setter is only called once:
+
+```js
+function Form() {
+  const prefix = useQuery('/prefix');
+  const [name, setName] = useState();
+  const [prefixedName, setPrefixedName] = useState();
+
+  useEffect(() => {
+    setPrefixedName(prefix + name)
+  }, [prefix, name]);
+}
+```
+
 ### `no-chain-state-updates` — [docs](https://react.dev/learn/you-might-not-need-an-effect#chains-of-computations)
 
 Disallow chaining state updates in an effect:
@@ -176,7 +205,7 @@ function Child({ onDataFetched }) {
 
 ### `no-pass-ref-to-parent` — [docs](https://react.dev/reference/react/forwardRef)
 
-Disallow passing refs, or data from callbacks registered on them, to parents in an effect. Use `forwardRef` instead:
+Disallow passing refs to parents in an effect. Use `forwardRef` instead:
 
 ```js
 function Child({ onRef }) {
@@ -188,6 +217,8 @@ function Child({ onRef }) {
 }
 ```
 
+Disallow calling props inside callbacks registered on refs in an effect. Use `forwardRef` to register the callback in the parent instead.
+
 ```js
 const Child = ({ onClicked }) => {
   const ref = useRef();

src/util/ast.js

@@ -235,8 +235,9 @@ export const getUseStateNode = (context, ref) => {
 
 /**
  * Walks up the AST until a `useEffect` call, returning `false` if never found, or finds any of the following on the way:
- * - An async function
- * - A function declaration, which may be called at an arbitrary later time
+ * - An `async` function
+ * - A function declaration, which may be called at an arbitrary later time.
+ *   - While we return false for *this* call, we may still return true for a call to a function containing this call. Combined with `getUpstreamRefs()`, it will still flag calls to the containing function.
  * - A function passed as a callback to another function or `new` - event handler, `setTimeout`, `Promise.then()` `new ResizeObserver()`, etc.
  *
  * Otherwise returns `true`.
@@ -256,7 +257,6 @@ export const isImmediateCall = (node) => {
     // Obviously not immediate if async. I think this never occurs in isolation from the below conditions? But just in case for now.
     node.async ||
     // Inside a named or anonymous function that may be called later, either as a callback or by the developer.
-    // Note while we return false for *this* call, we may still return true for a call to the function containing this call.
     node.type === "FunctionDeclaration" ||
     node.type === "FunctionExpression" ||
     node.type === "ArrowFunctionExpression"

test/no-derived-state.test.js

@@ -644,19 +644,19 @@ new MyRuleTester().run("no-derived-state", rule, {
       name: "From derived external state with single setter call",
       code: js`
         function Form() {
-          const name = useQuery('/name');
-          const [fullName, setFullName] = useState('');
+          const prefix = useQuery('/prefix');
+          const [name, setName] = useState();
+          const [prefixedName, setPrefixedName] = useState();
 
           useEffect(() => {
-            const prefixedName = 'Dr. ' + name;
-            setFullName(prefixedName) 
-          }, [name, setFullName]);
+            setPrefixedName(prefix + name)
+          }, [prefix, name]);
         }
       `,
       errors: [
         {
           messageId: "avoidSingleSetter",
-          data: { state: "fullName" },
+          data: { state: "prefixedName" },
         },
       ],
     },