, []);
32 | return
33 | <>
34 | {children}
35 |
36 | ;
37 | }`,
38 | errors: [{ messageId: "jsx-usememo-children" }],
39 | },
40 | {
41 | code: `const Component = () => {
42 | const children = ;
43 | return {children}
44 | }`,
45 | errors: [{ messageId: "jsx-usememo-children" }],
46 | },
47 | {
48 | code: `const Component = () => {
49 | const children = [, , ];
50 | return {children}
51 | }`,
52 | errors: [{ messageId: "array-usememo-children" }],
53 | },
54 | {
55 | code: `const Component = () => {
56 | return
57 | {() => }
58 |
59 | }`,
60 | errors: [{ messageId: "function-usecallback-children" }],
61 | }
62 | ];
63 |
64 | return { validTestCases, invalidTestCases };
65 | };
66 |
--------------------------------------------------------------------------------
/commitlint.config.js:
--------------------------------------------------------------------------------
1 | module.exports = { extends: ['@commitlint/config-conventional'] };
2 |
--------------------------------------------------------------------------------
/docs/rules/eslint-v9-migration-guide.md:
--------------------------------------------------------------------------------
1 | # ESLint v9 Migration Guide
2 |
3 | Starting from version 2.5.0, `@arthurgeron/eslint-plugin-react-usememo` exports configurations compatible with both ESLint v8 (traditional config) and ESLint v9 (flat config). This guide will help you migrate to ESLint v9 once full compatibility is achieved.
4 |
5 | ## Current Status
6 |
7 | **Important Note:** While the plugin exports the proper structure for ESLint v9 compatibility, there are some underlying compatibility issues with the current rule implementations and ESLint v9's new architecture. We're actively working on resolving these issues for complete ESLint v9 compatibility.
8 |
9 | For now, please continue using ESLint v8 with the traditional configuration.
10 |
11 | ## Prerequisites
12 |
13 | 1. Install ESLint v9 (once full compatibility is released):
14 | ```bash
15 | npm install eslint@^9.0.0 --save-dev
16 | ```
17 |
18 | 2. Ensure your `@arthurgeron/eslint-plugin-react-usememo` version is at least 2.5.0:
19 | ```bash
20 | npm install @arthurgeron/eslint-plugin-react-usememo@^2.5.0 --save-dev
21 | ```
22 |
23 | ## Migration Steps
24 |
25 | ### 1. Create a New Configuration File
26 |
27 | Once full compatibility is achieved, create a new `eslint.config.js` file in your project root:
28 |
29 | ```js
30 | // eslint.config.js
31 | import { flatConfig } from '@arthurgeron/eslint-plugin-react-usememo';
32 | import js from '@eslint/js';
33 | // Import other plugins as needed
34 | import reactPlugin from 'eslint-plugin-react';
35 | import reactHooksPlugin from 'eslint-plugin-react-hooks';
36 |
37 | export default [
38 | js.configs.recommended,
39 | {
40 | files: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'],
41 | plugins: {
42 | 'react': reactPlugin,
43 | 'react-hooks': reactHooksPlugin,
44 | '@arthurgeron/react-usememo': flatConfig
45 | },
46 | languageOptions: {
47 | ecmaVersion: 2022,
48 | sourceType: 'module',
49 | parserOptions: {
50 | ecmaFeatures: {
51 | jsx: true
52 | }
53 | }
54 | },
55 | rules: {
56 | // React rules
57 | 'react/react-in-jsx-scope': 'off',
58 | 'react-hooks/rules-of-hooks': 'error',
59 | 'react-hooks/exhaustive-deps': 'warn',
60 |
61 | // React useMemo plugin rules
62 | '@arthurgeron/react-usememo/require-usememo': 'error',
63 | '@arthurgeron/react-usememo/require-memo': 'error',
64 | '@arthurgeron/react-usememo/require-usememo-children': 'error'
65 | }
66 | }
67 | ];
68 | ```
69 |
70 | ### 2. Using the Recommended Configuration
71 |
72 | If you prefer to use the recommended configuration, you can simplify your config:
73 |
74 | ```js
75 | // eslint.config.js
76 | import { flatConfig } from '@arthurgeron/eslint-plugin-react-usememo';
77 | import js from '@eslint/js';
78 | import reactPlugin from 'eslint-plugin-react';
79 |
80 | export default [
81 | js.configs.recommended,
82 | // Your other configs...
83 | flatConfig.configs.recommended
84 | ];
85 | ```
86 |
87 | ### 3. CommonJS Support
88 |
89 | If you're using CommonJS modules:
90 |
91 | ```js
92 | // eslint.config.js
93 | const { flatConfig } = require('@arthurgeron/eslint-plugin-react-usememo');
94 | const js = require('@eslint/js');
95 |
96 | module.exports = [
97 | js.configs.recommended,
98 | // Your other configs...
99 | {
100 | plugins: {
101 | '@arthurgeron/react-usememo': flatConfig
102 | },
103 | rules: {
104 | '@arthurgeron/react-usememo/require-usememo': 'error',
105 | '@arthurgeron/react-usememo/require-memo': 'error',
106 | '@arthurgeron/react-usememo/require-usememo-children': 'error'
107 | }
108 | }
109 | ];
110 | ```
111 |
112 | ### 4. Remove the Old Configuration
113 |
114 | After confirming that the new configuration works correctly, you can remove the old `.eslintrc.*` file.
115 |
116 | ## Key Differences
117 |
118 | ### Traditional Config (v8)
119 |
120 | ```json
121 | {
122 | "plugins": ["@arthurgeron/react-usememo"],
123 | "rules": {
124 | "@arthurgeron/react-usememo/require-usememo": "error",
125 | "@arthurgeron/react-usememo/require-memo": "error",
126 | "@arthurgeron/react-usememo/require-usememo-children": "error"
127 | }
128 | }
129 | ```
130 |
131 | ### Flat Config (v9)
132 |
133 | ```js
134 | import { flatConfig } from '@arthurgeron/eslint-plugin-react-usememo';
135 |
136 | export default [
137 | {
138 | plugins: {
139 | '@arthurgeron/react-usememo': flatConfig
140 | },
141 | rules: {
142 | '@arthurgeron/react-usememo/require-usememo': 'error',
143 | '@arthurgeron/react-usememo/require-memo': 'error',
144 | '@arthurgeron/react-usememo/require-usememo-children': 'error'
145 | }
146 | }
147 | ];
148 | ```
149 |
150 | ## Example Projects
151 |
152 | For complete working examples of both configurations, check out the example projects in the [examples directory](https://github.com/arthurgeron/eslint-plugin-react-usememo/tree/main/examples):
153 |
154 | 1. **v8-traditional** - Example with ESLint v8 traditional config
155 | 2. **v9-flat** - Example with ESLint v9 flat config structure
156 |
157 | ## Additional Resources
158 |
159 | - [ESLint v9 Flat Config Documentation](https://eslint.org/docs/latest/use/configure/configuration-files-new)
160 | - [ESLint v9 Migration Guide](https://eslint.org/docs/latest/use/migrate-to-9.0.0)
--------------------------------------------------------------------------------
/docs/rules/require-memo.md:
--------------------------------------------------------------------------------
1 | # Rule: require-memo
2 |
3 | This rule enforces the use of `memo()` on function components. The objective is to optimize your component re-renders and avoid unnecessary render cycles when your component's props do not change.
4 |
5 | ## Rationale
6 |
7 | React’s rendering behavior ensures that whenever the parent component renders, the child component instances are re-rendered as well. When dealing with expensive computations or components, this could lead to performance issues. `memo()` is a higher order component which tells React to skip rendering the component if its props have not changed.
8 |
9 | When `memo()` wraps an exported component, then it will only re-render if the current and next props are not shallowly equal.
10 |
11 | ```jsx
12 | function MyComponent(props) { /* ... */ }
13 |
14 | export default memo(MyComponent);
15 | ```
16 |
17 | This rule applies to function components, not class-based components as they should extend `React.PureComponent` or must implement `shouldComponentUpdate` lifecycle method for similar optimization.
18 |
19 | ## Rule Details
20 | This rule will enforce that all function components are wrapped in `memo()`.
21 | Only exported components are validated.
22 |
23 | ## Incorrect Code Examples
24 |
25 | Here are examples of incorrect code:
26 |
27 | ```js
28 | // Not using memo on function component
29 | function ComponentA(props) {
30 | return
{props.name}
;
31 | }
32 |
33 | export default ComponentA;
34 | ```
35 |
36 | ## Correct Code Examples
37 |
38 | Here is an example of correct code pattern:
39 |
40 | ```js
41 | // Using memo on function component
42 | function ComponentB(props) {
43 | return
{props.name}
;
44 | }
45 |
46 | export default memo(ComponentB);
47 | ```
48 | ## Options
49 |
50 | The rule takes an optional object:
51 |
52 | ```json
53 | "rules": {
54 | "@arthurgeron/react-usememo/require-memo": [2, {
55 | "ignoredComponents": {
56 | "IgnoreMe": true,
57 | "DontIgnoreMe": false,
58 | "!IgnoreEverythingButMe": true,
59 | }
60 | }]
61 | }
62 | ```
63 | - `{ignoredComponents: Record}`: This allows you to add specific Component Names, thereby individually disabling or enabling them to be checked when used. Matching names with a `true` value will cause the checks to be ignored.
64 | You can use strict 1:1 comparisons (e.g., `"ComponentName"`) or employ Minimatch's Glob Pattern (e.g., `"*Item"`).
65 | > For more information on Minimatch, refer to its README [here](https://www.npmjs.com/package/minimatch). You may also find this [cheatsheet](https://github.com/motemen/minimatch-cheat-sheet) useful.
66 |
67 |
68 | ## When Not To Use It
69 |
70 | If the component always re-renders with different props or is not expensive in terms of performance, there is no real benefit to using `memo()`. In fact, using `memo()` for a large number of simple components could negatively impact performance as memoizing small components may cost more than re-rendering them.
71 |
72 | > For more examples and detailed explanation, refer to the eslint-plugin-react-memo [readme](https://github.com/myorg/eslint-plugin-react-memo).
--------------------------------------------------------------------------------
/docs/rules/require-usememo-children.md:
--------------------------------------------------------------------------------
1 | # Rule: require-usememo-children
2 |
3 | This rule enforces the use of `useMemo()` around children in render methods.
4 |
5 | ## Rationale
6 |
7 | The React `useMemo` hook is used to memorize expensive computations, but it can also be beneficial when passing complex objects or large arrays as props to child components.
8 |
9 | By wrapping such data with useMemo, you ensure that the child component will not re-render unless the data has changed. It compares the previous result with the new one and if they're the same, it avoids the re-render.
10 |
11 | ```jsx
12 | function ParentComponent({ list }) {
13 | const memoizedList = React.useMemo(() => list, [list]);
14 |
15 | return ;
16 | }
17 | ```
18 | This rule applies to any type of component (functional or class-based) as long as it involves passing complex children (objects, arrays) to another component.
19 |
20 | ## Rule Details
21 | This rule will enforce that all complex children are wrapped in `useMemo()`.
22 |
23 | ## Incorrect
24 | ```JavaScript
25 | function Component() {
26 |
27 |
28 | <>
29 |
30 |
31 |
32 | }
33 | ```
34 |
35 | ## Correct
36 | ```JavaScript
37 | function Component() {
38 |
39 | const children = useMemo(() => (), []);
40 |
41 | {children}
42 |
43 | }
44 | ```
45 |
46 | ## Options
47 |
48 | - `{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.).
49 |
50 | ## When Not To Use It
51 |
52 | If the child elements are simple types (strings, numbers) or the parent doesn't often re-render, then using `useMemo()` might be overkill and could even lead to worse performance. Therefore, it's better to turn off this rule in such cases.
53 |
54 | > For more examples and detailed explanation, refer to the eslint-plugin-react-memo-children [readme](https://github.com/myorg/eslint-plugin-react-memo-children).
--------------------------------------------------------------------------------
/docs/rules/require-usememo.md:
--------------------------------------------------------------------------------
1 | # Rule: require-usememo
2 |
3 | This rule requires complex values (objects, arrays, functions, and JSX) that get passed as props or referenced as a hook dependency to be wrapped in `useMemo()` or `useCallback()`.
4 |
5 | Not only does this rule enforce performance optimization practices, but it also comes with an **amazing autofix functionality**. It intelligently wraps necessary components with `useMemo()` or `useCallback()`, which results in a more efficient code and saves developers valuable time.
6 |
7 | This rule aims to ensure that calculations are not performed more often than necessary and a component's tree only recalculates or renders again when absolutely required. This controls expensive expressions and enhances your application's scalability and performance.
8 |
9 | ## Options
10 |
11 | The rule takes an optional object:
12 |
13 | ```json
14 | "rules": {
15 | "@arthurgeron/react-usememo/require-usememo": [2, {
16 | "strict": true,
17 | "checkHookReturnObject": true,
18 | "fix": { "addImports": true },
19 | "checkHookCalls": true,
20 | "ignoredHookCallsNames": { "useStateManagement": false },
21 | "ignoredPropNames": ["style"]
22 | }],
23 | }
24 | ```
25 |
26 | Here is what each option means:
27 |
28 | - `{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.).
29 |
30 | - `{checkHookReturnObject: true}`: Requires Object Expressions passed in return statements.
31 |
32 | - `{checkHookCalls: true}`: Requires objects/data passed to a non-native/Custom hook to be memoized.
33 |
34 | - `{ignoredHookCallsNames: Record}`: This allows you to add specific hook names, thereby individually disabling or enabling them to be checked when used. Matching names with a `true` value will cause the checks to be ignored.
35 | You can use strict 1:1 comparisons (e.g., `"useCustomHook"`) or employ Minimatch's Glob Pattern (e.g., `"useState*"`).
36 | > React's [use](https://react.dev/reference/react/use) hook is ignored here by default, while triggering async calls dinamically losely within a component's render cycle is bad, it does not affect the overall "performance" or behavior of the hook itself. This can be disabled with a `"use": true` entry.
37 |
38 | > For more information on Minimatch, refer to its README [here](https://www.npmjs.com/package/minimatch). You may also find this [cheatsheet](https://github.com/motemen/minimatch-cheat-sheet) useful.
39 |
40 | > If no strict names match and you have entries with Glob syntax, the algorithm will stop at the first match.
41 |
42 |
43 | - `fix`: Contains rules that only apply during eslint's fix routine.
44 |
45 | - `addImports`: Creates imports for useMemo and useCallback when one or both are added by this rule. Will increment to a existing import declaration or create a new one. Setting this to false disables it, defaults to true.
46 |
47 | - `ignoredPropNames`: This allows you to add specific prop name, thereby disabling them to be checked when used.
48 |
49 | ## Autofix Examples (Function Components & Hooks only)
50 |
51 | To illustrate the autofix feature in action, below are some examples with input code and the corresponding fixed output:
52 |
53 | #### Example 1
54 | Input:
55 | ```jsx
56 | const Component = () => {
57 | return {}} />;
58 | }
59 | ```
60 | Fixed output:
61 | ```jsx
62 | import { useCallback } from 'react';
63 |
64 | const Component = () => {
65 | const userData = useCallback(() => ({}), []);
66 | return ;
67 | }
68 | ```
69 |
70 | > If an expression is unnamed, it adopts the name of the property. Plus, it scans the scope to make sure the naming doesn't conflict with any existing variables. You can find more examples in our [tests](https://github.com/arthurgeron/eslint-plugin-react-usememo/__tests__/require-usememo.test.ts).
71 |
72 | > Imports for useMemo and useCallback are created, if necessary. Can be disabled with option `{ fix: { addImports: false } }`
73 |
74 | #### Example 2
75 | Input:
76 | ```jsx
77 | const Component = () => {
78 | const myObject = {};
79 | return ;
80 | }
81 | ```
82 | Fixed output:
83 | ```jsx
84 | import { useMemo } from 'react';
85 |
86 | const Component = () => {
87 | const myObject = useMemo(() => ({}), []);
88 | return ;
89 | }
90 | ```
91 |
92 | #### Example 3
93 | Input:
94 | ```jsx
95 | const Component = () => {
96 | const myArray = [];
97 | return ;
98 | }
99 | ```
100 | Fixed output:
101 | ```jsx
102 | import { useMemo } from 'react';
103 |
104 | const Component = () => {
105 | const myArray = useMemo(() => [], []);
106 | return ;
107 | }
108 | ```
109 |
110 | #### Example 4
111 | Input:
112 | ```jsx
113 | const Component = () => {
114 | const myInstance = new Object();
115 | return ;
116 | }
117 | ```
118 | Fixed output:
119 | ```jsx
120 | import { useMemo } from 'react';
121 |
122 | const Component = () => {
123 | const myInstance = useMemo(() => new Object(), []);
124 | return ;
125 | }
126 | ```
127 |
128 | > For all the example scenarios provided above, please check [`this guide`](https://github.com/arthurgeron/eslint-plugin-react-usememo/blob/main/docs/rules/require-usememo.md).
129 |
130 |
131 | Absolutely! Here are examples illustrating incorrect and correct application of the `require-usememo` rule.
132 |
133 | ## Incorrect Code Examples
134 |
135 | ### Function Components
136 |
137 | The function defined within a component is re-declared on each render which can lead to undesirable side effects or unnecessary render cycles.
138 |
139 | ```js
140 | function MyComponent() {
141 | const myObject = {}; // This object is re-created on each render
142 | const myArray = []; // This array is re-created on each render
143 |
144 | return ;
145 | }
146 | ```
147 |
148 | ### Hooks
149 |
150 | Objects defined within a hook will be re-declared on each render, which will cause undesirable side effects for other hooks and components using these objects.
151 |
152 | ```js
153 | function useData() {
154 | const myObject = {}; // This object is re-created on each render
155 | const myArray = []; // This array is re-created on each render
156 |
157 | return return {myObject, myArray};
158 | }
159 | ```
160 |
161 | ### Class Components
162 |
163 | Each time `render()` is called, a new object (or array or class instance) is created. A better approach would be to have this object created once and reused.
164 |
165 | ```js
166 | class MyClassComponent extends React.Component {
167 | render() {
168 | const myObject = {}; // This object is re-created on each render
169 | return ;
170 | }
171 | }
172 | ```
173 |
174 | ## Correct Code Examples
175 |
176 | ### Function Components
177 |
178 | Below, all the potentially mutable objects are wrapped with `useMemo`, so they aren't re-created on each render.
179 |
180 | ```js
181 | import { useMemo } from 'react';
182 |
183 | function MyComponent() {
184 | const myObject = useMemo(() => ({}), []);
185 | const myArray = useMemo(() => [], []);
186 |
187 | return ;
188 | }
189 | ```
190 |
191 | ### Hooks
192 |
193 | Below, all the potentially mutable objects are wrapped with `useMemo`, so they aren't re-created on each render.
194 |
195 | ```js
196 | function useData() {
197 | const myObject = useMemo(() => ({}), []);
198 | const myArray = useMemo(() => [], []);
199 |
200 | return return {myObject, myArray};
201 | }
202 | ```
203 |
204 | ### Class Components
205 |
206 | Here, we're storing our object in the component's state. This ensures the new object isn't re-created every time the component is rendered.
207 |
208 | ```js
209 | class MyClassComponent extends React.Component {
210 | constructor() {
211 | this.state = {
212 | myObject: {}
213 | }
214 | }
215 | render() {
216 | return ;
217 | }
218 | }
219 | ```
220 |
221 | Another example showing how to properly modify a incoming prop only when the reference changes, instead of changing it every render.
222 |
223 | ```js
224 | function getUserIdsInfo (users) {
225 | return users.reduce((acc, userData, index) => {
226 | const id = userData.id;
227 | const isFirstPosition = !index;
228 | acc.ids.push(id);
229 | acc.joinedKeys += isFirstPosition ? id : `,${id}`;
230 | return acc;
231 | }, { joinedKeys: '', ids: [] });
232 | }
233 |
234 | class MyClassComponent extends React.Component {
235 | constructor(props) {
236 | super(props);
237 | const { joinedKeys, ids: userIds } = getUserIdsInfo(props.users);
238 |
239 | this.state = {
240 | userIds,
241 | joinedKeys,
242 | };
243 | }
244 |
245 | static getDerivedStateFromProps(nextProps, prevState) {
246 |
247 | // Not optimal to do reduce every prop/state change
248 | // Optimally there'd be an "if" statement here to check if the prop we care about has changed, avoiding the reduce.
249 | // This is only an example
250 | const { joinedKeys, ids: userIds } = getUserIdsInfo(nextProps.users);
251 |
252 | if (joinedKeys !== prevState.joinedKeys) {
253 | return {
254 | userIds,
255 | joinedKeys,
256 | };
257 | }
258 | // Return null to indicate no change to state
259 | return null;
260 | }
261 |
262 | render() {
263 | // Reference to object wont change between renders, will only update when incoming prop 'users' changes.
264 | const { userIds } = this.state;
265 | return ;
266 | }
267 | }
268 | ```
269 |
270 | > For more examples and detailed explanation, refer to the eslint-plugin-react-usememo [readme](https://github.com/arthurgeron/eslint-plugin-react-usememo).
--------------------------------------------------------------------------------
/examples/README.md:
--------------------------------------------------------------------------------
1 | # ESLint Plugin React UseMemo Examples
2 |
3 | This directory contains example React projects demonstrating how to use the `@arthurgeron/eslint-plugin-react-usememo` plugin with different ESLint configurations.
4 |
5 | ## Examples
6 |
7 | 1. **[v8-traditional](./v8-traditional/)** - Demonstrates the plugin with ESLint v8 using traditional configuration format (`.eslintrc.json`)
8 |
9 | 2. **[v9-flat](./v9-flat/)** - Demonstrates the plugin with ESLint v9 using the new flat configuration format (`eslint.config.js`)
10 |
11 | ## Testing Results
12 |
13 | ### ESLint v8 Traditional Config
14 |
15 | The v8 traditional config example has been successfully tested. The plugin correctly identifies and reports issues when:
16 | - Objects aren't wrapped in `useMemo()`
17 | - Functions aren't wrapped in `useCallback()`
18 | - Components aren't wrapped in `React.memo()`
19 |
20 | You can run the linter in this example with:
21 | ```
22 | cd v8-traditional
23 | yarn install
24 | yarn lint
25 | ```
26 |
27 | ### ESLint v9 Flat Config
28 |
29 | While the plugin exports the correct flat config structure for ESLint v9, there are some compatibility issues with the current implementation and ESLint v9's new architecture. The example tests verify that the plugin's structure is correctly exported but the full integration with ESLint v9 requires further updates to the rule implementations.
30 |
31 | The test script confirms that the plugin correctly exports:
32 | - All three rules: `require-memo`, `require-usememo`, and `require-usememo-children`
33 | - The recommended configuration
34 |
35 | You can run the basic structure test with:
36 | ```
37 | cd v9-flat
38 | node test-plugin.js
39 | ```
40 |
41 | ## Key Differences
42 |
43 | ### ESLint v8 (Traditional Config)
44 |
45 | In the traditional config (`v8-traditional` example), the plugin is configured in `.eslintrc.json` like this:
46 |
47 | ```json
48 | {
49 | "plugins": ["@arthurgeron/react-usememo"],
50 | "rules": {
51 | "@arthurgeron/react-usememo/require-usememo": "error",
52 | "@arthurgeron/react-usememo/require-memo": "error",
53 | "@arthurgeron/react-usememo/require-usememo-children": "error"
54 | }
55 | }
56 | ```
57 |
58 | ### ESLint v9 (Flat Config)
59 |
60 | In the flat config (`v9-flat` example), the plugin is configured in `eslint.config.js` like this:
61 |
62 | ```js
63 | import { flatConfig } from '@arthurgeron/eslint-plugin-react-usememo';
64 |
65 | export default [
66 | {
67 | // ...
68 | plugins: {
69 | '@arthurgeron/react-usememo': flatConfig
70 | },
71 | rules: {
72 | '@arthurgeron/react-usememo/require-usememo': 'error',
73 | '@arthurgeron/react-usememo/require-memo': 'error',
74 | '@arthurgeron/react-usememo/require-usememo-children': 'error'
75 | }
76 | }
77 | ];
78 | ```
79 |
80 | Alternatively, you can use the plugin's recommended configuration:
81 |
82 | ```js
83 | import { flatConfig } from '@arthurgeron/eslint-plugin-react-usememo';
84 |
85 | export default [
86 | // Other configs...
87 | flatConfig.configs.recommended,
88 | ];
89 | ```
90 |
91 | ## Functionality
92 |
93 | Both examples demonstrate proper usage of:
94 | - `useMemo` for complex objects
95 | - `useCallback` for function references
96 | - `React.memo` for component memoization
97 |
98 | The examples show how the ESLint plugin enforces these patterns to improve React application performance.
--------------------------------------------------------------------------------
/examples/v8-traditional/.eslintrc.js:
--------------------------------------------------------------------------------
1 | const path = require('node:path');
2 |
3 | module.exports = {
4 | "env": {
5 | "browser": true,
6 | "es2021": true,
7 | "node": true
8 | },
9 | "extends": [
10 | "eslint:recommended",
11 | // "plugin:react/recommended"
12 | ],
13 | "parserOptions": {
14 | "ecmaFeatures": {
15 | "jsx": true
16 | },
17 | "ecmaVersion": "latest",
18 | "sourceType": "module"
19 | },
20 | "plugins": [
21 | // "react",
22 | // "react-hooks",
23 | "@arthurgeron/react-usememo"
24 | ],
25 | "rules": {
26 | // "react/react-in-jsx-scope": "off",
27 | // "react-hooks/rules-of-hooks": "error",
28 | // "react-hooks/exhaustive-deps": "warn",
29 |
30 | // require-usememo rule with custom options
31 | "@arthurgeron/react-usememo/require-usememo": ["error", {
32 | strict: true,
33 | checkHookReturnObject: true,
34 | fix: { addImports: true },
35 | checkHookCalls: true,
36 | ignoredHookCallsNames: { "useStateManagement": true },
37 | ignoredPropNames: ["style", "className"]
38 | }],
39 |
40 | // require-memo rule with custom options
41 | "@arthurgeron/react-usememo/require-memo": ["error", {
42 | ignoredComponents: {
43 | "Header": true,
44 | "Footer": true,
45 | "SimpleText": true
46 | }
47 | }],
48 |
49 | // require-usememo-children rule with custom options
50 | "@arthurgeron/react-usememo/require-usememo-children": ["error", {
51 | strict: true
52 | }]
53 | },
54 | "settings": {
55 | "react": {
56 | "version": "detect"
57 | }
58 | }
59 | }
--------------------------------------------------------------------------------
/examples/v8-traditional/README.md:
--------------------------------------------------------------------------------
1 | # ESLint Plugin React UseMemo - v8 Traditional Config Example
2 |
3 | This example project demonstrates how to use the `@arthurgeron/eslint-plugin-react-usememo` plugin with ESLint v8 using the traditional configuration format.
4 |
5 | ## Setup Details
6 |
7 | This project uses:
8 | - React 18
9 | - ESLint v8
10 | - Traditional ESLint configuration (`.eslintrc.json`)
11 |
12 | ## Key Files
13 |
14 | - `.eslintrc.json`: Contains the ESLint configuration that enables the react-usememo plugin rules
15 | - `src/App.js`: Demonstrates proper usage of `useMemo`, `useCallback`, and `React.memo`
16 |
17 | ## How to Use
18 |
19 | 1. Install dependencies:
20 | ```
21 | npm install
22 | ```
23 |
24 | 2. Run the linter:
25 | ```
26 | npm run lint
27 | ```
28 |
29 | 3. Start the development server:
30 | ```
31 | npm start
32 | ```
33 |
34 | ## ESLint Plugin Configuration
35 |
36 | The plugin is configured in `.eslintrc.json` with the following rules enabled:
37 |
38 | ```json
39 | {
40 | "@arthurgeron/react-usememo/require-usememo": "error",
41 | "@arthurgeron/react-usememo/require-memo": "error",
42 | "@arthurgeron/react-usememo/require-usememo-children": "error"
43 | }
44 | ```
45 |
46 | This configuration ensures that:
47 | 1. Complex values (objects, arrays, functions) passed as props are wrapped in `useMemo`/`useCallback`
48 | 2. Function components are wrapped in `React.memo()`
49 | 3. Complex values passed as children are wrapped in `useMemo`/`useCallback`
--------------------------------------------------------------------------------
/examples/v8-traditional/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "eslint-plugin-react-usememo-v8-example",
3 | "version": "1.0.0",
4 | "description": "Example React project with ESLint v8 traditional config",
5 | "main": "src/index.js",
6 | "scripts": {
7 | "start": "react-scripts start",
8 | "build": "react-scripts build",
9 | "test": "react-scripts test",
10 | "lint": "eslint src --resolve-plugins-relative-to=../../"
11 | },
12 | "dependencies": {
13 | "react": "^18.2.0",
14 | "react-dom": "^18.2.0",
15 | "react-scripts": "5.0.1"
16 | },
17 | "devDependencies": {
18 | "@arthurgeron/eslint-plugin-react-usememo": "../../",
19 | "eslint": "^8.56.0",
20 | "eslint-plugin-react": "^7.33.2",
21 | "eslint-plugin-react-hooks": "^4.6.0"
22 | },
23 | "browserslist": {
24 | "production": [
25 | ">0.2%",
26 | "not dead",
27 | "not op_mini all"
28 | ],
29 | "development": [
30 | "last 1 chrome version",
31 | "last 1 firefox version",
32 | "last 1 safari version"
33 | ]
34 | }
35 | }
--------------------------------------------------------------------------------
/examples/v8-traditional/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useMemo, useCallback } from 'react';
2 | import { Custom } from './Custom';
3 |
4 | // This component demonstrates a component that would benefit from useMemo and memo
5 | function CountDisplay({ count, label, onClick }) {
6 | console.log(`Rendering CountDisplay with count: ${count}`);
7 |
8 | // This complex object should be memoized to prevent unnecessary re-renders
9 | const styles = useMemo(() => ({
10 | container: {
11 | padding: '20px',
12 | margin: '10px',
13 | border: '1px solid #ccc',
14 | borderRadius: '5px',
15 | backgroundColor: count % 2 === 0 ? '#f0f0f0' : '#e0e0e0'
16 | },
17 | text: {
18 | color: count > 5 ? 'red' : 'blue',
19 | fontWeight: 'bold'
20 | }
21 | }), [count]);
22 | // This should trigger a lint error without useMemo because it creates a new object each render
23 | const data = {
24 | name: 'John',
25 | age: 30
26 | };
27 |
28 | return (
29 |
30 |
{label}: {count}
31 |
32 |
33 |
34 | );
35 | }
36 |
37 | // Wrap with React.memo to prevent re-renders when props don't change
38 | const MemoizedCountDisplay = React.memo(CountDisplay);
39 |
40 | // This component is not wrapped in React.memo, which should trigger the require-memo rule
41 | export function UnmemoizedComponent({ value }) {
42 | // Add some complexity to make sure it triggers the require-memo rule
43 | const formattedValue = `Value: ${value}`;
44 | const styles = {
45 | container: {
46 | padding: '10px',
47 | margin: '5px',
48 | border: '1px solid #ddd',
49 | borderRadius: '3px'
50 | }
51 | };
52 |
53 | return (
54 |
55 |
{formattedValue}
56 | This component should be memoized
57 |
58 | );
59 | }
60 |
61 | // Won't trigger ESLint errors because it's in ignoredComponents
62 | export function Header({ title }) {
63 | return (
64 |
65 |
{title}
66 |
67 | );
68 | }
69 |
70 | // Won't trigger ESLint errors because it's in ignoredComponents
71 | export function Footer() {
72 | return (
73 |
76 | );
77 | }
78 |
79 | // Won't trigger ESLint errors because it's in ignoredComponents
80 | export function SimpleText({ text }) {
81 | return
{text}
;
82 | }
83 |
84 | // A component with complex children that should trigger the require-usememo-children rule
85 | function ComplexChildContainer({ children }) {
86 | return (
87 |
88 | {children}
89 |
90 | );
91 | }
92 |
93 | function App() {
94 | const [count1, setCount1] = useState(0);
95 | const [count2, setCount2] = useState(0);
96 |
97 | // Using useCallback to memoize function references
98 | const incrementCount1 = useCallback(() => {
99 | setCount1(prevCount => prevCount + 1);
100 | }, []);
101 |
102 | const incrementCount2 = useCallback(() => {
103 | setCount2(prevCount => prevCount + 1);
104 | }, []);
105 |
106 | // Example of a complex calculation that should be memoized
107 | const total = useMemo(() => {
108 | console.log('Calculating total...');
109 | // Simulating expensive calculation
110 | return count1 + count2;
111 | }, [count1, count2]);
112 |
113 | // This could trigger a lint error without useMemo because it creates a new object each render
114 | const userData = useMemo(() => ({
115 | counts: {
116 | first: count1,
117 | second: count2,
118 | total
119 | },
120 | lastUpdated: new Date().toISOString()
121 | }), [count1, count2, total]);
122 |
123 | // These objects would normally require useMemo, but won't throw errors because their props are in ignoredPropNames
124 | const customStyle = { color: 'blue', fontWeight: 'bold' };
125 | const customClassName = { primary: true, secondary: false };
126 |
127 | // Calling a hook that would normally require its arguments to be memoized
128 | const useStateManagementResult = useStateManagement({ count1, count2 });
129 |
130 | // This complex JSX structure should be memoized when used as children
131 | const complexChildren = (
132 |
133 |
Complex Children
134 |
These children should be memoized with useMemo
135 |
136 |
Item 1
137 |
Item 2
138 |
139 |
140 | );
141 |
142 | // This function should use useCallback
143 | const handleClick = () => {
144 | console.log('Clicked!');
145 | };
146 |
147 | return (
148 |
149 |
ESLint React useMemo Plugin Example (v8)
150 |
151 |
Total: {total}
152 |
Last Updated: {userData.lastUpdated}
153 |
154 |
159 |
160 |
165 |
166 |
167 |
168 |
169 | This div has a style prop that would normally require useMemo
170 |
171 |
172 |
173 | This div has a className prop that would normally require useMemo
174 |
46 | );
47 | }
48 |
49 | // Wrap with React.memo to prevent re-renders when props don't change
50 | const MemoizedCountDisplay = React.memo(CountDisplay);
51 |
52 | // This component should trigger errors because it's not wrapped in React.memo
53 | export function UnmemoizedComponent({ value }) {
54 | // Add some complexity to make sure it triggers the require-memo rule
55 | const formattedValue = `Value: ${value}`;
56 | const styles = {
57 | container: {
58 | padding: '10px',
59 | margin: '5px',
60 | border: '1px solid #ddd',
61 | borderRadius: '3px'
62 | }
63 | };
64 |
65 | return (
66 |
67 |
{formattedValue}
68 | This component should be memoized
69 |
70 | );
71 | }
72 |
73 | // Won't trigger ESLint errors because it's in ignoredComponents
74 | export function Header({ title }) {
75 | return (
76 |
77 |
{title}
78 |
79 | );
80 | }
81 | // Won't trigger ESLint errors because it's in ignoredComponents
82 | export function Footer() {
83 | return (
84 |
87 | );
88 | }
89 |
90 | export function SimpleText({ text }) {
91 | return
{text}
;
92 | }
93 |
94 | // A component with complex children that should trigger the require-usememo-children rule
95 | function ComplexChildContainer({ children }) {
96 | return (
97 |
98 | {children}
99 |
100 | );
101 | }
102 |
103 | function App() {
104 | const [count1, setCount1] = useState(0);
105 | const [count2, setCount2] = useState(0);
106 |
107 | // Using useCallback to memoize function references
108 | const incrementCount1 = useCallback(() => {
109 | setCount1(prevCount => prevCount + 1);
110 | }, []);
111 |
112 | const incrementCount2 = useCallback(() => {
113 | setCount2(prevCount => prevCount + 1);
114 | }, []);
115 |
116 | // Example of a complex calculation that should be memoized
117 | const total = useMemo(() => {
118 | console.log('Calculating total...');
119 | // Simulating expensive calculation
120 | return count1 + count2;
121 | }, [count1, count2]);
122 |
123 | // This could trigger a lint error without useMemo because it creates a new object each render
124 | const userData = useMemo(() => ({
125 | counts: {
126 | first: count1,
127 | second: count2,
128 | total
129 | },
130 | lastUpdated: new Date().toISOString()
131 | }), [count1, count2, total]);
132 |
133 | // These objects would normally require useMemo, but won't throw errors because their props are in ignoredPropNames
134 | const customStyle = { color: 'blue', fontWeight: 'bold' };
135 | const customClassName = { primary: true, secondary: false };
136 |
137 | // Calling a hook that would normally require its arguments to be memoized
138 | const useStateManagementResult = useStateManagement({ count1, count2 });
139 |
140 | // This complex JSX structure should be memoized when used as children
141 | const complexChildren = (
142 |
143 |
Complex Children
144 |
These children should be memoized with useMemo
145 |
146 |
Item 1
147 |
Item 2
148 |
149 |
150 | );
151 |
152 | return (
153 |
154 |
ESLint React useMemo Plugin Example (v9 Flat Config)
155 |
156 |
Total: {total}
157 |
Last Updated: {userData.lastUpdated}
158 |
159 |
164 |
165 |
170 |
171 |
172 |
173 |
174 | This div has a style prop that would normally require useMemo
175 |
176 |
177 |
178 | This div has a className prop that would normally require useMemo
179 |