Diagnostics tool for React Compiler compatibility
npm install react-compiler-checkfetch, setTimeout in render).
bash
npm install -g react-compiler-check
`
#### Or install it in your project:
`bash
npm install react-compiler-check
`
Usage
Run the CLI on your project’s source directory:
`bash
npx react-compiler-check ./src
`
- The tool scans all .js, .jsx, .ts, and .tsx files in the specified directory.
- If no path is provided, it defaults to ./src.
Example Output
$3
` bash
function notAComponent() {
const [count] = useState(0);
}
const App: React.FC = () => {
setTimeout(() => console.log('Impure!'), 1000);
return ;
};
`
$3
` bash
npx react-compiler-check ./src
`
$3
`bash
Analyzing code at ./src...
Diagnostics:
- src/App.tsx:2:16 - Hook useState is called outside a React component or custom hook, violating React rules.
Suggestion: Ensure hooks are only called in React function components or custom hooks.
- src/App.tsx:6:3 - Impure render (setTimeout in render) violates React Compiler’s purity rules.
Suggestion: Move setTimeout to useEffect or a separate event handler.
2 issue(s) found.
``