fix: improve effect provenance diagnostics (#1452)

Author: aidenybai

.changeset/fix-effect-provenance-diagnostics.md

@@ -0,0 +1,5 @@
+---
+"oxlint-plugin-react-doctor": patch
+---
+
+Improve diagnostic precision for effect cleanup, derived state, parent callbacks, deferred state transitions, and KaTeX HTML rendering.

packages/fuzz/corpus/regressions/dangerous-html-sink--katex-dead-unknown-options.tsx

@@ -0,0 +1,27 @@
+// rule: dangerous-html-sink
+// weakness: control-flow
+// source: React Bench Datastoria audit review
+
+import katex from "katex";
+
+interface MathPreviewProps {
+  options: object;
+  value: string;
+}
+
+export const MathPreview = ({ options, value }: MathPreviewProps) => (
+  <>
+    <span
+      dangerouslySetInnerHTML={{
+        // eslint-disable-next-line no-constant-binary-expression
+        __html: false && katex.renderToString(value, options),
+      }}
+    />
+    <span
+      dangerouslySetInnerHTML={{
+        // eslint-disable-next-line no-constant-condition
+        __html: (true ? "ready" : katex.renderToString(value, options)) ?? "",
+      }}
+    />
+  </>
+);

packages/fuzz/corpus/regressions/dangerous-html-sink--katex-local-safe-options-forwarding.tsx

@@ -0,0 +1,31 @@
+// rule: dangerous-html-sink
+// weakness: default-parameter
+// source: React Bench Datastoria audit review
+
+import katex from "katex";
+
+const renderMath = (value: string, options: object = { throwOnError: false }): string =>
+  katex.renderToString(value, options);
+
+const renderWithDependentDefault = (
+  value: string,
+  baseOptions: object,
+  options: object = baseOptions,
+): string => katex.renderToString(value, options);
+
+const renderWithDestructuredDefault = (
+  value: string,
+  { options = { trust: false } }: { options?: object } = {},
+): string => katex.renderToString(value, options);
+
+export const MathPreview = ({ value }: { value: string }) => (
+  <>
+    <span dangerouslySetInnerHTML={{ __html: renderMath(value) }} />
+    <span
+      dangerouslySetInnerHTML={{
+        __html: renderWithDependentDefault(value, { trust: false }),
+      }}
+    />
+    <span dangerouslySetInnerHTML={{ __html: renderWithDestructuredDefault(value, {}) }} />
+  </>
+);

packages/fuzz/corpus/regressions/effect-needs-cleanup--memoized-media-query-list-disposer.tsx

@@ -0,0 +1,36 @@
+// rule: effect-needs-cleanup
+// verdict: pass
+// weakness: library-idiom
+// source: react-bench write-react-azouaoui-med-react-pro-sidebar-267 6Z552od false positive
+
+import React from "react";
+
+const getServerSnapshot = () => false;
+const noopUnsubscribe = () => undefined;
+
+export const useMediaQuery = (breakpoint?: string): boolean => {
+  const mediaQueryList = React.useMemo(
+    () =>
+      breakpoint && typeof window !== "undefined" && typeof window.matchMedia === "function"
+        ? window.matchMedia(breakpoint)
+        : null,
+    [breakpoint],
+  );
+
+  const subscribe = React.useCallback(
+    (onStoreChange: () => void) => {
+      if (!mediaQueryList) return noopUnsubscribe;
+      if (typeof mediaQueryList.addEventListener === "function") {
+        mediaQueryList.addEventListener("change", onStoreChange);
+        return () => mediaQueryList.removeEventListener("change", onStoreChange);
+      }
+      mediaQueryList.addListener(onStoreChange);
+      return () => mediaQueryList.removeListener(onStoreChange);
+    },
+    [mediaQueryList],
+  );
+
+  const getSnapshot = React.useCallback(() => Boolean(mediaQueryList?.matches), [mediaQueryList]);
+
+  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+};

packages/fuzz/corpus/regressions/no-adjust-state-on-prop-change--slideshow-terminal-transition.tsx

@@ -0,0 +1,31 @@
+// rule: no-adjust-state-on-prop-change
+// verdict: pass
+// weakness: library-idiom
+// source: verified React Bench SlideshowContext trial 5sz2qXB
+
+import * as React from "react";
+import { useTimeouts } from "./timeouts";
+
+interface SlideshowProps {
+  disabled: boolean;
+}
+
+export const Slideshow = ({ disabled }: SlideshowProps) => {
+  const [playing, setPlaying] = React.useState(true);
+  const { setTimeout, clearTimeout } = useTimeouts();
+  const scheduler = React.useRef<ReturnType<typeof setTimeout>>();
+
+  const cancelScheduler = React.useCallback(() => {
+    clearTimeout(scheduler.current);
+    scheduler.current = undefined;
+  }, [clearTimeout]);
+
+  React.useEffect(() => {
+    if (playing && disabled) {
+      cancelScheduler();
+      setPlaying(false);
+    }
+  }, [playing, disabled, cancelScheduler]);
+
+  return playing;
+};

packages/fuzz/corpus/regressions/no-prop-callback-in-effect--opaque-ref-escape.tsx

@@ -0,0 +1,16 @@
+// rule: no-prop-callback-in-effect
+// weakness: alias-guard
+// source: parent callback provenance review
+// verdict: pass
+
+import { useEffect, useRef, useState } from "react";
+
+declare const overwriteRef: (reference: { current: (value: number) => void }) => void;
+
+export const Child = ({ onChange }: { onChange: (value: number) => void }) => {
+  const [value] = useState(0);
+  const callbackRef = useRef(onChange);
+  overwriteRef(callbackRef);
+  useEffect(() => callbackRef.current(value), [value]);
+  return null;
+};

packages/fuzz/corpus/true-positives/dangerous-html-sink--katex-unknown-options.tsx

@@ -0,0 +1,14 @@
+// rule: dangerous-html-sink
+// weakness: option-provenance
+// source: React Bench Datastoria audit
+
+import katex from "katex";
+
+interface MathPreviewProps {
+  options: object;
+  value: string;
+}
+
+export const MathPreview = ({ options, value }: MathPreviewProps) => (
+  <span dangerouslySetInnerHTML={{ __html: katex.renderToString(value, options) }} />
+);

packages/fuzz/corpus/true-positives/effect-needs-cleanup--memoized-media-query-list-mutable-result.tsx

@@ -0,0 +1,26 @@
+// rule: effect-needs-cleanup
+// verdict: fail
+// weakness: identity-provenance
+// source: adversarial review of memoized MediaQueryList cleanup ownership
+
+import React from "react";
+
+export const CustomMemoizedListener = ({ customBus, shouldUseMediaQuery }) => {
+  const memoizedBus = React.useMemo(() => {
+    let bus = customBus;
+    if (shouldUseMediaQuery) {
+      bus = window.matchMedia("(prefers-color-scheme: dark)");
+    }
+    return bus;
+  }, [customBus, shouldUseMediaQuery]);
+
+  const subscribe = React.useCallback(
+    (handle) => {
+      memoizedBus.addListener(handle);
+      return () => memoizedBus.removeListener(handle);
+    },
+    [memoizedBus],
+  );
+
+  return React.useSyncExternalStore(subscribe, getSnapshot);
+};

packages/fuzz/corpus/true-positives/no-adjust-state-on-prop-change--event-owned-fallback.tsx

@@ -0,0 +1,28 @@
+// rule: no-adjust-state-on-prop-change
+// weakness: alias-guard
+// source: AppFlowy DocumentHistoryModal React Bench uonQqwc
+
+import { useEffect, useMemo, useState } from "react";
+
+interface Version {
+  versionId: string;
+  visible: boolean;
+}
+
+export const DocumentHistoryModal = ({ versions }: { versions: Version[] }) => {
+  const visibleVersions = useMemo(() => versions.filter((version) => version.visible), [versions]);
+  const [selectedVersionId, setSelectedVersionId] = useState("");
+
+  useEffect(() => {
+    if (visibleVersions.some((version) => version.versionId === selectedVersionId)) return;
+    setSelectedVersionId(visibleVersions[0].versionId);
+  }, [visibleVersions]);
+
+  return (
+    <VersionList
+      versions={visibleVersions}
+      selectedVersionId={selectedVersionId}
+      onSelect={setSelectedVersionId}
+    />
+  );
+};

packages/fuzz/corpus/true-positives/no-derived-state-effect--copy-first-sort-helper.tsx

@@ -0,0 +1,27 @@
+// rule: no-derived-state-effect
+// weakness: wrapper-transparency
+// source: React Bench fix-react-rdh-sofn-xyz-mailing-settings Jp9zWjq and Mf8qhaw
+
+import { useEffect, useState } from "react";
+
+interface ApiKey {
+  id: string;
+  createdAt: string;
+}
+
+const sortApiKeys = (apiKeys: ApiKey[]): ApiKey[] =>
+  [...apiKeys].sort(
+    (firstApiKey, secondApiKey) =>
+      new Date(secondApiKey.createdAt).getTime() - new Date(firstApiKey.createdAt).getTime(),
+  );
+
+export const Settings = ({ initialApiKeys }: { initialApiKeys: ApiKey[] }) => {
+  const [apiKeys] = useState(initialApiKeys);
+  const [apiKeyRows, setApiKeyRows] = useState<string[]>([]);
+
+  useEffect(() => {
+    setApiKeyRows(sortApiKeys(apiKeys).map((apiKey) => apiKey.id));
+  }, [apiKeys]);
+
+  return <output>{apiKeyRows.join(",")}</output>;
+};