react-doctor/react-compiler-destructure-method
Destructure the method up front: `const { push } = useRouter()` then call `push(...)` directly — clearer dependency graph and easier for React Compiler to memoize
- Category: Architecture
- Severity: warn
- Source:
oxlint-plugin-react-doctor - Framework: global
- Enabled when: always
Validation prompt
Use this to decide whether a fired diagnostic is real or a false positive.
Fires on bindingName.method(...) invocations where bindingName is bound at the component's top level to a useRouter / useNavigation / useSearchParams call and the method is in that hook's recognized set (useRouter: push, replace, back, forward, refresh, prefetch). The rule only fires when the binding truly comes from the hook call in the same component, so false positives are rare.
Fix prompt
Use this once validation confirms the diagnostic is real.
Destructure the methods at the hook call site: const { push, replace } = useRouter(), then invoke push("/foo") directly. This narrows the component's dependency surface to the methods actually used and gives React Compiler a stable function reference to memoize against. The same pattern applies to useNavigation and useSearchParams. See https://react.dev/learn/react-compiler