fix

Author: aidenybai

packages/react-doctor/src/plugin/rules/state-and-effects.ts

@@ -50,6 +50,7 @@ export const noDerivedStateEffect: Rule = {
       if (!containsOnlySetStateCalls) return;
 
       let allArgumentsDeriveFromDeps = true;
+      let hasAnyDependencyReference = false;
       for (const statement of statements) {
         const setStateArguments = statement.expression.arguments;
         if (!setStateArguments?.length) continue;
@@ -59,11 +60,15 @@ export const noDerivedStateEffect: Rule = {
           if (child.type === "Identifier") referencedIdentifiers.push(child.name);
         });
 
-        if (
-          referencedIdentifiers.some(
-            (name) => !dependencyNames.has(name) && !isSetterIdentifier(name),
-          )
-        ) {
+        const nonSetterIdentifiers = referencedIdentifiers.filter(
+          (name) => !isSetterIdentifier(name),
+        );
+
+        if (nonSetterIdentifiers.some((name) => dependencyNames.has(name))) {
+          hasAnyDependencyReference = true;
+        }
+
+        if (nonSetterIdentifiers.some((name) => !dependencyNames.has(name))) {
           allArgumentsDeriveFromDeps = false;
           break;
         }
@@ -72,7 +77,9 @@ export const noDerivedStateEffect: Rule = {
       if (allArgumentsDeriveFromDeps) {
         context.report({
           node,
-          message: "Derived state in useEffect — compute during render instead",
+          message: hasAnyDependencyReference
+            ? "Derived state in useEffect — compute during render instead"
+            : "State reset in useEffect — use a key prop to reset component state when props change",
         });
       }
     },

packages/react-doctor/src/utils/run-oxlint.ts

@@ -87,7 +87,7 @@ const RULE_CATEGORY_MAP: Record<string, string> = {
 
 const RULE_HELP_MAP: Record<string, string> = {
   "no-derived-state-effect":
-    "Compute during render: `const derived = computeFrom(dep1, dep2)` — no useEffect needed",
+    "For derived state, compute inline: `const x = fn(dep)`. For state resets on prop change, use a key prop: `<Component key={prop} />`",
   "no-fetch-in-effect":
     "Use `useQuery()` from @tanstack/react-query, `useSWR()`, or fetch in a Server Component instead",
   "no-cascading-set-state":

packages/react-doctor/tests/fixtures/basic-react/src/state-issues.tsx

@@ -10,6 +10,14 @@ const DerivedStateComponent = ({ items }: { items: string[] }) => {
   return <div>{filteredItems.join(",")}</div>;
 };
 
+const StateResetComponent = ({ visible }: { visible: boolean }) => {
+  const [inputValue, setInputValue] = useState("");
+  useEffect(() => {
+    setInputValue("");
+  }, [visible]);
+  return <input value={inputValue} onChange={(event) => setInputValue(event.target.value)} />;
+};
+
 const FetchInEffectComponent = () => {
   const [data, setData] = useState(null);
 
@@ -91,6 +99,7 @@ const DependencyLiteralComponent = () => {
 
 export {
   DerivedStateComponent,
+  StateResetComponent,
   FetchInEffectComponent,
   LazyInitComponent,
   CascadingSetStateComponent,