Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
React (for JSX)
✓ import React from 'react';
✗ const React = require('react'); // Common in older CJS or non-bundled Node.js environments; preferred modern syntax is ESM import.
While not strictly required for JSX in modern bundlers that auto-import 'react/jsx-runtime', explicitly importing 'React' is still a common and good practice, especially when using React's APIs directly (e.g., React.createElement).
useState
✓ import { useState } from 'react';
✗ import useState from 'react'; // 'useState' is a named export, not the default.
Hooks like `useState`, `useEffect`, `useRef`, `useContext`, etc., are named exports from the 'react' package and must be destructured.
useReducer
✓ import { useReducer } from 'react';
✗ import { UseReducer } from 'react'; // Incorrect casing.
All standard React Hooks follow a 'use' prefix and camelCase naming convention.
createContext
✓ import { createContext } from 'react';
✗ import createContext from 'react'; // Named export.
Functions like `createContext`, `memo`, `forwardRef`, etc., are also named exports.
This example demonstrates a basic React functional component using `useState` for managing component state and `useEffect` for handling side effects like data fetching. It simulates an asynchronous API call to fetch a list of items and displays them, including loading and error states. Requires a 'root' div in your HTML.
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom/client';
interface Item {
id: number;
name: string;
}
function ItemList() {
const [items, setItems] = useState<Item[]>([]);
const [loading, setLoading] = useState<boolean>(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
const fetchItems = async () => {
try {
// Simulate an API call
const response = await new Promise<Item[]>((resolve) =>
setTimeout(() => {
resolve([
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Cherry' }
]);
}, 1000)
);
setItems(response);
} catch (err: any) {
setError(err.message || 'Failed to fetch items');
} finally {
setLoading(false);
}
};
fetchItems();
}, []);
if (loading) {
return <div>Loading items...</div>;
}
if (error) {
return <div style={{ color: 'red' }}>Error: {error}</div>;
}
return (
<div>
<h1>Item List</h1>
<ul>
{items.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
</div>
);
}
// Render the component to the DOM
const rootElement = document.getElementById('root');
if (rootElement) {
ReactDOM.createRoot(rootElement).render(
<React.StrictMode>
<ItemList />
</React.StrictMode>
);
} else {
console.error("Root element with ID 'root' not found in the document.");
}
Debug
Known issues
breakingThe `eslint-plugin-react-hooks` package version 7.1.0 accidentally removed the `component-hook-factories` rule, causing ESLint configurations referencing it to fail. This was swiftly corrected in version 7.1.1.fixUpgrade `eslint-plugin-react-hooks` to version 7.1.1 or higher, or adjust your ESLint configuration if you were relying on the removed rule behavior in 7.1.0.
affects: 7.1.0
gotchaReact Server Components (RSCs) introduce a significant paradigm shift for building React applications, potentially requiring architectural changes for existing projects. While designed for improved performance and new capabilities, they can introduce complexity in understanding rendering environments (server vs. client) and data fetching strategies.fixThoroughly review React's official documentation on Server Components and Server Actions. Plan for incremental adoption and ensure your build tools and frameworks (e.g., Next.js, Remix) support and are configured correctly for RSCs. Understand the implications for state management and client-side interactivity.
affects: >=18.0.0 (initial introduction), >=19.0.0 (further development)
gotchaRecent React versions (19.x) have included multiple patches for 'DoS mitigations', 'cycle protections', and 'loop protection' in React Server Components and Server Actions. These indicate ongoing efforts to harden the security and stability of these new features, implying that earlier or specific complex usage patterns might have been susceptible to vulnerabilities or performance degradation.fixAlways keep your React and associated framework dependencies (e.g., Next.js) up to date. Follow security best practices when implementing Server Actions and ensure proper input validation and authorization checks, especially for publicly accessible actions.
affects: >=19.0.0
gotchaMismatching versions of `react` and `react-dom` can lead to unexpected behavior, cryptic errors, or warnings during development, as these packages are designed to work in tandem and share internal mechanisms, particularly with concurrent features introduced in React 18+ and further developed in React 19+.fixAlways ensure that `react` and `react-dom` are installed at the exact same major and minor version (e.g., `react@19.2.5` and `react-dom@19.2.5`). Use a package manager feature like `npm update` or `yarn upgrade` to keep them in sync, or explicitly define identical versions in `package.json`.
affects: All versions, especially >=18.0.0
Errors
Common errors & fixes
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
Attempting to use a React Hook (e.g., useState, useEffect) outside of a functional component or a custom Hook.
fixEnsure all Hook calls are directly within the body of a React functional component or a custom Hook. Do not call Hooks in regular JavaScript functions, class components, or conditional blocks (e.g., inside an `if` statement or a loop) at the top level of a component.
ReferenceError: React is not defined
JSX is used without `React` being in scope, or `React` (or another named export) is used directly without being imported.
fixAdd `import React from 'react';` at the top of your file. Modern bundlers might auto-import `React` for JSX under certain configurations, but explicitly importing it is robust. For named exports, ensure they are destructured: `import { useState } from 'react';`. TypeError: Object(...) is not a function
This often occurs when mixing CommonJS `require()` with ESM `import` statements, or when trying to destructure a default export (e.g., `const { default } = require('react');` instead of `const React = require('react');`).
fixEnsure consistent module syntax (ESM `import` or CJS `require`) throughout your project and correctly handle default vs. named exports. If using `require`, use `const MyThing = require('package').MyThing;` for named exports or `const React = require('react');` for the default. Audit
Dependencies
react-domrequiredRequired for rendering React components into the browser DOM or for server-side rendering (SSR/RSC).