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.
This plugin currently supports the following libraries and hooks:
- react-hook-form:
useFormhook (Issue #12298) - @tanstack/react-table:
useReactTablehook (Issue #5567)
npm install --save-dev eslint-plugin-use-no-memoFor ESLint v9+ with flat config:
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',
},
},
];For older ESLint versions:
module.exports = {
plugins: ['use-no-memo'],
rules: {
'use-no-memo/react-hook-form': 'error',
'use-no-memo/tanstack-table': 'error',
},
};Enforces the 'use no memo' directive when using useForm from react-hook-form.
import { useForm } from 'react-hook-form';
function MyComponent() {
const form = useForm();
// ... rest of component
}import { useForm } from 'react-hook-form';
function MyComponent() {
'use no memo';
const form = useForm();
// ... rest of component
}Enforces the 'use no memo' directive when using useReactTable from @tanstack/react-table.
import { useReactTable } from '@tanstack/react-table';
function MyComponent() {
const table = useReactTable({
// ... table config
});
}import { useReactTable } from '@tanstack/react-table';
function MyComponent() {
'use no memo';
const table = useReactTable({
// ... table config
});
// ... rest of component
}