https://github.com/steadicat/eslint-plugin-react-memo

memo/useMemo/useCallback all the things!
https://github.com/steadicat/eslint-plugin-react-memo

Last synced: 8 days ago
JSON representation

memo/useMemo/useCallback all the things!

• Host: GitHub
• URL: https://github.com/steadicat/eslint-plugin-react-memo
• Owner: steadicat
• Created: 2021-03-28T23:59:51.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2024-02-11T23:52:10.000Z (9 months ago)
• Last Synced: 2024-09-19T23:39:47.378Z (about 2 months ago)
• Language: TypeScript
• Size: 108 KB
• Stars: 76
• Watchers: 5
• Forks: 7
• Open Issues: 7
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# eslint-plugin-react-memo

Enforce that all function components are wrapped in `React.memo`, and that all props and deps are wrapped in `useMemo`/`useCallback` so they don’t break memo.

Rationale: [Why we memo all the things](https://attardi.org/why-we-memo-all-the-things/).

## Rules

### `require-memo`

Requires all function components to be wrapped in `React.memo()`.

### `require-usememo`

Requires complex values (objects, arrays, functions, and JSX) that get passed props or referenced as a hook dependency to be wrapped in `React.useMemo()` or `React.useCallback()`.

Options:

- `{strict: true}`: Fails even in cases where it is difficult to determine if the value in question is a primitive (string or number) or a complex value (object, array, etc.).

### `require-usememo-children` (**ADVANCED**)

Requires complex values (objects, arrays, functions, and JSX) that get passed as children to be wrapped in `React.useMemo()` or `React.useCallback()`.

Options:

- `{strict: true}`: Fails even in cases where it is difficult to determine if the value in question is a primitive (string or number) or a complex value (object, array, etc.).