eslint-plugin-use-no-memo

ESLint plugin for enforcing the "use no memo" directive with React libraries incompatible with React Compiler.

The React Compiler automatically optimizes React components by memoizing expensive operations. However, some React libraries are incompatible with this automatic memoization and require the 'use no memo' directive to opt out of React Compiler optimizations.

This ESLint plugin helps you automatically detect when you're using incompatible hooks and either warns you to add the directive or automatically fixes it for you.

Supported Libraries

This plugin currently supports the following libraries and hooks:

- react-hook-form: useForm hook (Issue #12298)
- @tanstack/react-table: useReactTable hook (Issue #5567)
- material-react-table: useMaterialReactTable hook

Installation

``bash
npm install --save-dev eslint-plugin-use-no-memo
`

Configuration

$3

For ESLint v9+ with flat config:

`js
import useNoMemo from 'eslint-plugin-use-no-memo';

export default [
{
plugins: {
'use-no-memo': useNoMemo,
},
rules: {
'use-no-memo/react-hook-form': 'error',
'use-no-memo/tanstack-table': 'error',
'use-no-memo/material-react-table': 'error',
},
},
];
`

$3

For older ESLint versions:

`js
module.exports = {
plugins: ['use-no-memo'],
rules: {
'use-no-memo/react-hook-form': 'error',
'use-no-memo/tanstack-table': 'error',
'use-no-memo/material-react-table': 'error',
},
};
`

Rules

$3

Enforces the 'use no memo' directive when using useForm from react-hook-form.

#### ❌ Incorrect

`jsx
import { useForm } from 'react-hook-form';

function MyComponent() {
const form = useForm();
// ... rest of component
}
`

#### ✅ Correct

`jsx
import { useForm } from 'react-hook-form';

function MyComponent() {
'use no memo';
const form = useForm();
// ... rest of component
}
`

$3

Enforces the 'use no memo' directive when using useReactTable from @tanstack/react-table.

#### ❌ Incorrect

`jsx
import { useReactTable } from '@tanstack/react-table';

function MyComponent() {
const table = useReactTable({
// ... table config
});
}
`

#### ✅ Correct

`jsx
import { useReactTable } from '@tanstack/react-table';

function MyComponent() {
'use no memo';
const table = useReactTable({
// ... table config
});
// ... rest of component
}

$3

Enforces the 'use no memo' directive when using useMaterialReactTable from material-react-table.

#### ❌ Incorrect

`jsx
import { useMaterialReactTable } from 'material-react-table';

function MyComponent() {
const table = useMaterialReactTable({
// ... table config
});
}
`

#### ✅ Correct

`jsx
import { useMaterialReactTable } from 'material-react-table';

function MyComponent() {
'use no memo';
const table = useMaterialReactTable({
// ... table config
});
}
`
``