New
Introducing React Bench, see how different models perform on React code
Menu
What Is React Doctor?
Quickstart
Install for Coding Agents
How to Fix Issues
GitHub Actions Setup
Updating CI
Other CI Providers
Migrating to CI v2
Config Files
ESLint & oxlint Plugins
Add Custom Rules
CLI Reference
GitHub Action Reference
Node.js API
Changelog
Modified MIT License
Terms of Service
Privacy Policy
Data Use
Security
Support
Rules reference

react-doctor/no-inert-sticky-position

Sticky positioning has no inset

  • Category: Bugs
  • Severity: warn
  • Source: oxlint-plugin-react-doctor
  • Framework: global
  • Enabled when: always
  • Tags: design
  • Default: Disabled until configured

Validate the diagnostic

Confirm the reported code matches this rule before you edit it.

Confirm the reported code matches react-doctor/no-inert-sticky-position. Compare it with the Before example and verify the same API, framework, and execution context. Treat it as a false positive only when one of those conditions differs.

Compare the code

The corrected pattern shows a focused way to address the diagnostic.

Reported pattern

<header className="sticky">Navigation</header>

Corrected pattern

<header className="sticky top-0">Navigation</header>

How to fix

Use the corrected pattern as a reference. Preserve behavior that the rule does not require you to change.

Copyable fix prompt

Copy this self-contained prompt into your coding agent after you confirm the diagnostic.

Fix every confirmed react-doctor/no-inert-sticky-position diagnostic in the current repository. Required change: - Set a non-auto inset such as top, bottom, inset-block-start, or its matching Tailwind utility on the sticky axis.
Reference transformation:Before:
<header className="sticky">Navigation</header>
After:
<header className="sticky top-0">Navigation</header>
Constraints: - Confirm the reported code matches the Before pattern. - Make the smallest change that fixes the root cause. - Preserve behavior and interfaces unrelated to this diagnostic. - Reuse existing project components, utilities, and conventions. - Do not introduce render-phase side effects, render-phase state updates, or Hooks rule violations. - Use existing brand assets, product facts, content, and design tokens. - Do not invent claims, customer data, typefaces, or artwork. - Adapt identifiers and framework details instead of copying blindly. - Do not disable the rule or suppress matching code. Verification: - Run focused tests for the changed behavior. - Run React Doctor and confirm this diagnostic no longer appears. - Report the files changed and any checks you could not run.

More Bugs rules from the rules reference:

  • react-doctor/no-initialize-state: Disallow initializing state in an effect.
  • react-doctor/no-is-mounted: Disallow the removed legacy isMounted() API — cancel async work instead of guarding setState.
  • react-doctor/no-jsx-element-type: Widen the return type from JSX.Element to React.ReactNode: function App(): React.ReactNode
  • react-doctor/no-legacy-class-lifecycles: Move side effects in `componentWillMount` to `componentDidMount`; replace `componentWillReceiveProps` with `componentDidUpdate` (compare prevProps) or the static `getDerivedStateFromProps` for pure state derivation; replace `componentWillUpdate` with `getSnapshotBeforeUpdate` paired with `componentDidUpdate`. The `UNSAFE_` prefix only silences the warning — React 19 removes both forms.
  • react-doctor/no-legacy-context-api: Replace `childContextTypes` + `getChildContext` with `const MyContext = createContext(...)` + `<MyContext.Provider value={...}>`; replace `contextTypes` with `static contextType = MyContext` (single context) or `useContext()` / `use()` from a function component. The provider and every consumer must migrate together — partial migrations leave consumers reading the wrong context.