, []);
+ return
+ <>
+ {children}
+
+ ;
+ }`,
+ errors: [{ messageId: "jsx-usememo-children" }],
+ },
+ {
+ code: `const Component = () => {
+ const children = ;
+ return {children}
+ }`,
+ errors: [{ messageId: "jsx-usememo-children" }],
+ },
+ {
+ code: `const Component = () => {
+ const children = [, , ];
+ return {children}
+ }`,
+ errors: [{ messageId: "array-usememo-children" }],
+ },
+ {
+ code: `const Component = () => {
+ return
+ {() => }
+
+ }`,
+ errors: [{ messageId: "function-usecallback-children" }],
+ }
+ ];
+
+ return { validTestCases, invalidTestCases };
+};
diff --git a/docs/rules/eslint-v9-migration-guide.md b/docs/rules/eslint-v9-migration-guide.md
new file mode 100644
index 0000000..4ff7abe
--- /dev/null
+++ b/docs/rules/eslint-v9-migration-guide.md
@@ -0,0 +1,160 @@
+# ESLint v9 Migration Guide
+
+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.
+
+## Current Status
+
+**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.
+
+For now, please continue using ESLint v8 with the traditional configuration.
+
+## Prerequisites
+
+1. Install ESLint v9 (once full compatibility is released):
+ ```bash
+ npm install eslint@^9.0.0 --save-dev
+ ```
+
+2. Ensure your `@arthurgeron/eslint-plugin-react-usememo` version is at least 2.5.0:
+ ```bash
+ npm install @arthurgeron/eslint-plugin-react-usememo@^2.5.0 --save-dev
+ ```
+
+## Migration Steps
+
+### 1. Create a New Configuration File
+
+Once full compatibility is achieved, create a new `eslint.config.js` file in your project root:
+
+```js
+// eslint.config.js
+import { flatConfig } from '@arthurgeron/eslint-plugin-react-usememo';
+import js from '@eslint/js';
+// Import other plugins as needed
+import reactPlugin from 'eslint-plugin-react';
+import reactHooksPlugin from 'eslint-plugin-react-hooks';
+
+export default [
+ js.configs.recommended,
+ {
+ files: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'],
+ plugins: {
+ 'react': reactPlugin,
+ 'react-hooks': reactHooksPlugin,
+ '@arthurgeron/react-usememo': flatConfig
+ },
+ languageOptions: {
+ ecmaVersion: 2022,
+ sourceType: 'module',
+ parserOptions: {
+ ecmaFeatures: {
+ jsx: true
+ }
+ }
+ },
+ rules: {
+ // React rules
+ 'react/react-in-jsx-scope': 'off',
+ 'react-hooks/rules-of-hooks': 'error',
+ 'react-hooks/exhaustive-deps': 'warn',
+
+ // React useMemo plugin rules
+ '@arthurgeron/react-usememo/require-usememo': 'error',
+ '@arthurgeron/react-usememo/require-memo': 'error',
+ '@arthurgeron/react-usememo/require-usememo-children': 'error'
+ }
+ }
+];
+```
+
+### 2. Using the Recommended Configuration
+
+If you prefer to use the recommended configuration, you can simplify your config:
+
+```js
+// eslint.config.js
+import { flatConfig } from '@arthurgeron/eslint-plugin-react-usememo';
+import js from '@eslint/js';
+import reactPlugin from 'eslint-plugin-react';
+
+export default [
+ js.configs.recommended,
+ // Your other configs...
+ flatConfig.configs.recommended
+];
+```
+
+### 3. CommonJS Support
+
+If you're using CommonJS modules:
+
+```js
+// eslint.config.js
+const { flatConfig } = require('@arthurgeron/eslint-plugin-react-usememo');
+const js = require('@eslint/js');
+
+module.exports = [
+ js.configs.recommended,
+ // Your other configs...
+ {
+ plugins: {
+ '@arthurgeron/react-usememo': flatConfig
+ },
+ rules: {
+ '@arthurgeron/react-usememo/require-usememo': 'error',
+ '@arthurgeron/react-usememo/require-memo': 'error',
+ '@arthurgeron/react-usememo/require-usememo-children': 'error'
+ }
+ }
+];
+```
+
+### 4. Remove the Old Configuration
+
+After confirming that the new configuration works correctly, you can remove the old `.eslintrc.*` file.
+
+## Key Differences
+
+### Traditional Config (v8)
+
+```json
+{
+ "plugins": ["@arthurgeron/react-usememo"],
+ "rules": {
+ "@arthurgeron/react-usememo/require-usememo": "error",
+ "@arthurgeron/react-usememo/require-memo": "error",
+ "@arthurgeron/react-usememo/require-usememo-children": "error"
+ }
+}
+```
+
+### Flat Config (v9)
+
+```js
+import { flatConfig } from '@arthurgeron/eslint-plugin-react-usememo';
+
+export default [
+ {
+ plugins: {
+ '@arthurgeron/react-usememo': flatConfig
+ },
+ rules: {
+ '@arthurgeron/react-usememo/require-usememo': 'error',
+ '@arthurgeron/react-usememo/require-memo': 'error',
+ '@arthurgeron/react-usememo/require-usememo-children': 'error'
+ }
+ }
+];
+```
+
+## Example Projects
+
+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):
+
+1. **v8-traditional** - Example with ESLint v8 traditional config
+2. **v9-flat** - Example with ESLint v9 flat config structure
+
+## Additional Resources
+
+- [ESLint v9 Flat Config Documentation](https://eslint.org/docs/latest/use/configure/configuration-files-new)
+- [ESLint v9 Migration Guide](https://eslint.org/docs/latest/use/migrate-to-9.0.0)
\ No newline at end of file
diff --git a/examples/README.md b/examples/README.md
new file mode 100644
index 0000000..0a1a985
--- /dev/null
+++ b/examples/README.md
@@ -0,0 +1,98 @@
+# ESLint Plugin React UseMemo Examples
+
+This directory contains example React projects demonstrating how to use the `@arthurgeron/eslint-plugin-react-usememo` plugin with different ESLint configurations.
+
+## Examples
+
+1. **[v8-traditional](./v8-traditional/)** - Demonstrates the plugin with ESLint v8 using traditional configuration format (`.eslintrc.json`)
+
+2. **[v9-flat](./v9-flat/)** - Demonstrates the plugin with ESLint v9 using the new flat configuration format (`eslint.config.js`)
+
+## Testing Results
+
+### ESLint v8 Traditional Config
+
+The v8 traditional config example has been successfully tested. The plugin correctly identifies and reports issues when:
+- Objects aren't wrapped in `useMemo()`
+- Functions aren't wrapped in `useCallback()`
+- Components aren't wrapped in `React.memo()`
+
+You can run the linter in this example with:
+```
+cd v8-traditional
+yarn install
+yarn lint
+```
+
+### ESLint v9 Flat Config
+
+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.
+
+The test script confirms that the plugin correctly exports:
+- All three rules: `require-memo`, `require-usememo`, and `require-usememo-children`
+- The recommended configuration
+
+You can run the basic structure test with:
+```
+cd v9-flat
+node test-plugin.js
+```
+
+## Key Differences
+
+### ESLint v8 (Traditional Config)
+
+In the traditional config (`v8-traditional` example), the plugin is configured in `.eslintrc.json` like this:
+
+```json
+{
+ "plugins": ["@arthurgeron/react-usememo"],
+ "rules": {
+ "@arthurgeron/react-usememo/require-usememo": "error",
+ "@arthurgeron/react-usememo/require-memo": "error",
+ "@arthurgeron/react-usememo/require-usememo-children": "error"
+ }
+}
+```
+
+### ESLint v9 (Flat Config)
+
+In the flat config (`v9-flat` example), the plugin is configured in `eslint.config.js` like this:
+
+```js
+import { flatConfig } from '@arthurgeron/eslint-plugin-react-usememo';
+
+export default [
+ {
+ // ...
+ plugins: {
+ '@arthurgeron/react-usememo': flatConfig
+ },
+ rules: {
+ '@arthurgeron/react-usememo/require-usememo': 'error',
+ '@arthurgeron/react-usememo/require-memo': 'error',
+ '@arthurgeron/react-usememo/require-usememo-children': 'error'
+ }
+ }
+];
+```
+
+Alternatively, you can use the plugin's recommended configuration:
+
+```js
+import { flatConfig } from '@arthurgeron/eslint-plugin-react-usememo';
+
+export default [
+ // Other configs...
+ flatConfig.configs.recommended,
+];
+```
+
+## Functionality
+
+Both examples demonstrate proper usage of:
+- `useMemo` for complex objects
+- `useCallback` for function references
+- `React.memo` for component memoization
+
+The examples show how the ESLint plugin enforces these patterns to improve React application performance.
\ No newline at end of file
diff --git a/examples/v8-traditional/.eslintrc.js b/examples/v8-traditional/.eslintrc.js
new file mode 100644
index 0000000..af091d1
--- /dev/null
+++ b/examples/v8-traditional/.eslintrc.js
@@ -0,0 +1,59 @@
+const path = require('node:path');
+
+module.exports = {
+ "env": {
+ "browser": true,
+ "es2021": true,
+ "node": true
+ },
+ "extends": [
+ "eslint:recommended",
+ // "plugin:react/recommended"
+ ],
+ "parserOptions": {
+ "ecmaFeatures": {
+ "jsx": true
+ },
+ "ecmaVersion": "latest",
+ "sourceType": "module"
+ },
+ "plugins": [
+ // "react",
+ // "react-hooks",
+ "@arthurgeron/react-usememo"
+ ],
+ "rules": {
+ // "react/react-in-jsx-scope": "off",
+ // "react-hooks/rules-of-hooks": "error",
+ // "react-hooks/exhaustive-deps": "warn",
+
+ // require-usememo rule with custom options
+ "@arthurgeron/react-usememo/require-usememo": ["error", {
+ strict: true,
+ checkHookReturnObject: true,
+ fix: { addImports: true },
+ checkHookCalls: true,
+ ignoredHookCallsNames: { "useStateManagement": true },
+ ignoredPropNames: ["style", "className"]
+ }],
+
+ // require-memo rule with custom options
+ "@arthurgeron/react-usememo/require-memo": ["error", {
+ ignoredComponents: {
+ "Header": true,
+ "Footer": true,
+ "SimpleText": true
+ }
+ }],
+
+ // require-usememo-children rule with custom options
+ "@arthurgeron/react-usememo/require-usememo-children": ["error", {
+ strict: true
+ }]
+ },
+ "settings": {
+ "react": {
+ "version": "detect"
+ }
+ }
+}
\ No newline at end of file
diff --git a/examples/v8-traditional/README.md b/examples/v8-traditional/README.md
new file mode 100644
index 0000000..be350b3
--- /dev/null
+++ b/examples/v8-traditional/README.md
@@ -0,0 +1,49 @@
+# ESLint Plugin React UseMemo - v8 Traditional Config Example
+
+This example project demonstrates how to use the `@arthurgeron/eslint-plugin-react-usememo` plugin with ESLint v8 using the traditional configuration format.
+
+## Setup Details
+
+This project uses:
+- React 18
+- ESLint v8
+- Traditional ESLint configuration (`.eslintrc.json`)
+
+## Key Files
+
+- `.eslintrc.json`: Contains the ESLint configuration that enables the react-usememo plugin rules
+- `src/App.js`: Demonstrates proper usage of `useMemo`, `useCallback`, and `React.memo`
+
+## How to Use
+
+1. Install dependencies:
+ ```
+ npm install
+ ```
+
+2. Run the linter:
+ ```
+ npm run lint
+ ```
+
+3. Start the development server:
+ ```
+ npm start
+ ```
+
+## ESLint Plugin Configuration
+
+The plugin is configured in `.eslintrc.json` with the following rules enabled:
+
+```json
+{
+ "@arthurgeron/react-usememo/require-usememo": "error",
+ "@arthurgeron/react-usememo/require-memo": "error",
+ "@arthurgeron/react-usememo/require-usememo-children": "error"
+}
+```
+
+This configuration ensures that:
+1. Complex values (objects, arrays, functions) passed as props are wrapped in `useMemo`/`useCallback`
+2. Function components are wrapped in `React.memo()`
+3. Complex values passed as children are wrapped in `useMemo`/`useCallback`
\ No newline at end of file
diff --git a/examples/v8-traditional/package.json b/examples/v8-traditional/package.json
new file mode 100644
index 0000000..04d2a56
--- /dev/null
+++ b/examples/v8-traditional/package.json
@@ -0,0 +1,35 @@
+{
+ "name": "eslint-plugin-react-usememo-v8-example",
+ "version": "1.0.0",
+ "description": "Example React project with ESLint v8 traditional config",
+ "main": "src/index.js",
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test",
+ "lint": "eslint src --resolve-plugins-relative-to=../../"
+ },
+ "dependencies": {
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-scripts": "5.0.1"
+ },
+ "devDependencies": {
+ "@arthurgeron/eslint-plugin-react-usememo": "../../",
+ "eslint": "^8.56.0",
+ "eslint-plugin-react": "^7.33.2",
+ "eslint-plugin-react-hooks": "^4.6.0"
+ },
+ "browserslist": {
+ "production": [
+ ">0.2%",
+ "not dead",
+ "not op_mini all"
+ ],
+ "development": [
+ "last 1 chrome version",
+ "last 1 firefox version",
+ "last 1 safari version"
+ ]
+ }
+}
\ No newline at end of file
diff --git a/examples/v8-traditional/src/App.js b/examples/v8-traditional/src/App.js
new file mode 100644
index 0000000..3d02ac8
--- /dev/null
+++ b/examples/v8-traditional/src/App.js
@@ -0,0 +1,197 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import { Custom } from './Custom';
+
+// This component demonstrates a component that would benefit from useMemo and memo
+function CountDisplay({ count, label, onClick }) {
+ console.log(`Rendering CountDisplay with count: ${count}`);
+
+ // This complex object should be memoized to prevent unnecessary re-renders
+ const styles = useMemo(() => ({
+ container: {
+ padding: '20px',
+ margin: '10px',
+ border: '1px solid #ccc',
+ borderRadius: '5px',
+ backgroundColor: count % 2 === 0 ? '#f0f0f0' : '#e0e0e0'
+ },
+ text: {
+ color: count > 5 ? 'red' : 'blue',
+ fontWeight: 'bold'
+ }
+ }), [count]);
+ // This should trigger a lint error without useMemo because it creates a new object each render
+ const data = {
+ name: 'John',
+ age: 30
+ };
+
+ return (
+
+
{label}: {count}
+
+
+
+ );
+}
+
+// Wrap with React.memo to prevent re-renders when props don't change
+const MemoizedCountDisplay = React.memo(CountDisplay);
+
+// This component is not wrapped in React.memo, which should trigger the require-memo rule
+export function UnmemoizedComponent({ value }) {
+ // Add some complexity to make sure it triggers the require-memo rule
+ const formattedValue = `Value: ${value}`;
+ const styles = {
+ container: {
+ padding: '10px',
+ margin: '5px',
+ border: '1px solid #ddd',
+ borderRadius: '3px'
+ }
+ };
+
+ return (
+
+
{formattedValue}
+ This component should be memoized
+
+ );
+}
+
+// Won't trigger ESLint errors because it's in ignoredComponents
+export function Header({ title }) {
+ return (
+
+
{title}
+
+ );
+}
+
+// Won't trigger ESLint errors because it's in ignoredComponents
+export function Footer() {
+ return (
+
+ );
+}
+
+// Won't trigger ESLint errors because it's in ignoredComponents
+export function SimpleText({ text }) {
+ return
{text}
;
+}
+
+// A component with complex children that should trigger the require-usememo-children rule
+function ComplexChildContainer({ children }) {
+ return (
+
+ {children}
+
+ );
+}
+
+function App() {
+ const [count1, setCount1] = useState(0);
+ const [count2, setCount2] = useState(0);
+
+ // Using useCallback to memoize function references
+ const incrementCount1 = useCallback(() => {
+ setCount1(prevCount => prevCount + 1);
+ }, []);
+
+ const incrementCount2 = useCallback(() => {
+ setCount2(prevCount => prevCount + 1);
+ }, []);
+
+ // Example of a complex calculation that should be memoized
+ const total = useMemo(() => {
+ console.log('Calculating total...');
+ // Simulating expensive calculation
+ return count1 + count2;
+ }, [count1, count2]);
+
+ // This could trigger a lint error without useMemo because it creates a new object each render
+ const userData = useMemo(() => ({
+ counts: {
+ first: count1,
+ second: count2,
+ total
+ },
+ lastUpdated: new Date().toISOString()
+ }), [count1, count2, total]);
+
+ // These objects would normally require useMemo, but won't throw errors because their props are in ignoredPropNames
+ const customStyle = { color: 'blue', fontWeight: 'bold' };
+ const customClassName = { primary: true, secondary: false };
+
+ // Calling a hook that would normally require its arguments to be memoized
+ const useStateManagementResult = useStateManagement({ count1, count2 });
+
+ // This complex JSX structure should be memoized when used as children
+ const complexChildren = (
+
+
Complex Children
+
These children should be memoized with useMemo
+
+
Item 1
+
Item 2
+
+
+ );
+
+ // This function should use useCallback
+ const handleClick = () => {
+ console.log('Clicked!');
+ };
+
+ return (
+
+
ESLint React useMemo Plugin Example (v8)
+
+
Total: {total}
+
Last Updated: {userData.lastUpdated}
+
+
+
+
+
+
+
+
+ This div has a style prop that would normally require useMemo
+
+
+
+ This div has a className prop that would normally require useMemo
+
+
+
+
+
{useStateManagementResult}
+
+
+ {complexChildren}
+
+
+
+
+
+
+ );
+}
+
+// Mock hook for demonstration
+function useStateManagement(state) {
+ return JSON.stringify(state);
+}
+
+export { MemoizedCountDisplay, ComplexChildContainer };
+export default App;
\ No newline at end of file
diff --git a/examples/v8-traditional/src/Custom.js b/examples/v8-traditional/src/Custom.js
new file mode 100644
index 0000000..f273435
--- /dev/null
+++ b/examples/v8-traditional/src/Custom.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+export const Custom = React.memo(({ data }) => {
+ return (
+
+ );
+}
+
+// Wrap with React.memo to prevent re-renders when props don't change
+const MemoizedCountDisplay = React.memo(CountDisplay);
+
+// This component should trigger errors because it's not wrapped in React.memo
+export function UnmemoizedComponent({ value }) {
+ // Add some complexity to make sure it triggers the require-memo rule
+ const formattedValue = `Value: ${value}`;
+ const styles = {
+ container: {
+ padding: '10px',
+ margin: '5px',
+ border: '1px solid #ddd',
+ borderRadius: '3px'
+ }
+ };
+
+ return (
+
+
{formattedValue}
+ This component should be memoized
+
+ );
+}
+
+// Won't trigger ESLint errors because it's in ignoredComponents
+export function Header({ title }) {
+ return (
+
+
{title}
+
+ );
+}
+// Won't trigger ESLint errors because it's in ignoredComponents
+export function Footer() {
+ return (
+
+ );
+}
+
+export function SimpleText({ text }) {
+ return
{text}
;
+}
+
+// A component with complex children that should trigger the require-usememo-children rule
+function ComplexChildContainer({ children }) {
+ return (
+
+ {children}
+
+ );
+}
+
+function App() {
+ const [count1, setCount1] = useState(0);
+ const [count2, setCount2] = useState(0);
+
+ // Using useCallback to memoize function references
+ const incrementCount1 = useCallback(() => {
+ setCount1(prevCount => prevCount + 1);
+ }, []);
+
+ const incrementCount2 = useCallback(() => {
+ setCount2(prevCount => prevCount + 1);
+ }, []);
+
+ // Example of a complex calculation that should be memoized
+ const total = useMemo(() => {
+ console.log('Calculating total...');
+ // Simulating expensive calculation
+ return count1 + count2;
+ }, [count1, count2]);
+
+ // This could trigger a lint error without useMemo because it creates a new object each render
+ const userData = useMemo(() => ({
+ counts: {
+ first: count1,
+ second: count2,
+ total
+ },
+ lastUpdated: new Date().toISOString()
+ }), [count1, count2, total]);
+
+ // These objects would normally require useMemo, but won't throw errors because their props are in ignoredPropNames
+ const customStyle = { color: 'blue', fontWeight: 'bold' };
+ const customClassName = { primary: true, secondary: false };
+
+ // Calling a hook that would normally require its arguments to be memoized
+ const useStateManagementResult = useStateManagement({ count1, count2 });
+
+ // This complex JSX structure should be memoized when used as children
+ const complexChildren = (
+
+
Complex Children
+
These children should be memoized with useMemo
+
+
Item 1
+
Item 2
+
+
+ );
+
+ return (
+
+
ESLint React useMemo Plugin Example (v9 Flat Config)
+
+
Total: {total}
+
Last Updated: {userData.lastUpdated}
+
+
+
+
+
+
+
+
+ This div has a style prop that would normally require useMemo
+
+
+
+ This div has a className prop that would normally require useMemo
+
+
+
+
+
{useStateManagementResult}
+
+
+ {complexChildren}
+
+
+
+
+ );
+}
+
+// Mock hook for demonstration
+function useStateManagement(state) {
+ return JSON.stringify(state);
+}
+
+export { MemoizedCountDisplay, ComplexChildContainer };
+export default App;
\ No newline at end of file
diff --git a/examples/v9-flat/src/Custom.js b/examples/v9-flat/src/Custom.js
new file mode 100644
index 0000000..f273435
--- /dev/null
+++ b/examples/v9-flat/src/Custom.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+export const Custom = React.memo(({ data }) => {
+ return (
+