# `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