← Back to rules

react/incompatible-library Correctness

What it does

Warns on usage of library APIs known to be incompatible with memoization (manual or automatic), such as react-hook-form's watch(), TanStack Table's useReactTable(), and TanStack Virtual's useVirtualizer().

Powered by the React Compiler, which runs once per file and is shared with the other React Compiler rules. Port of react-hooks/incompatible-library.

Why is this bad?

These APIs rely on components re-rendering on every change; memoization — by the compiler or by hand — breaks their update model, so the UI stops reflecting new data.

Examples

Examples of incorrect code for this rule:

import { useReactTable } from "@tanstack/react-table";
function Component({ columns, data }) {
  const table = useReactTable({ columns, data });
  return <div>{table.getRowModel().rows.length}</div>;
}

Examples of correct code for this rule:

function Component({ rows }) {
  return <div>{rows.length}</div>;
}

How to use

To enable this rule using the config file or in the CLI, you can use:

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/incompatible-library": "error"
  }
}

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["react"],
  rules: {
    "react/incompatible-library": "error",
  },
});

CLI

oxlint --deny react/incompatible-library --react-plugin

Version

This rule was added in vnext.

References

• Rule Source
• Upstream rule docs
• Open rule in Oxc Playground