React

Common errors

• Configuration for rule 'component-hook-factories' is invalid: The rule 'component-hook-factories' was not found.

  cause The `component-hook-factories` rule was temporarily removed from `eslint-plugin-react-hooks` in version 7.1.0.
  fix Upgrade `eslint-plugin-react-hooks` to version 7.1.1 or later (`npm install eslint-plugin-react-hooks@latest`). If the rule is still in your ESLint config, you can safely remove it as it's now a no-op.

• Maximum call stack size exceeded

  cause React Server Functions or Server Components hitting internal loop/cycle protection mechanisms, often due to circular dependencies or excessive recursive calls mentioned in recent DoS and loop protection updates.
  fix Review your Server Component/Function dependencies for circular references. Optimize data fetching and ensure server-side logic has appropriate exit conditions to prevent infinite loops, especially in `use` or `async` contexts.

Warnings

• breaking The `eslint-plugin-react-hooks` package in version 7.1.0 accidentally removed the `component-hook-factories` rule, causing ESLint configurations that referenced it to fail. It was re-added as a no-op in 7.1.1.
  Fix: Upgrade `eslint-plugin-react-hooks` to version 7.1.1 or higher. If you still reference the `component-hook-factories` rule, consider removing it as it's now a no-op.
• gotcha React Server Components (RSC) are a rapidly evolving area in React 19, with frequent updates focused on security, DoS mitigations, cycle protections, and loop safeguards. Users extensively relying on RSCs should be aware of potential subtle behavioral changes or new edge cases with each patch.
  Fix: Stay updated with React patch releases and consult the official React documentation and community for best practices and latest guidance on Server Components. Regularly test RSC-heavy applications.

Install

• npm install react npm
• yarn add react yarn
• pnpm add react pnpm

Imports

• useState
  wrong:

  const { useState } = require('react')

  correct:

  import { useState } from 'react'

Quickstart

A basic functional component demonstrating state management with the `useState` hook and rendered using `createRoot`.

import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

// Render the component
const root = ReactDOM.createRoot(document.getElementById('root') ?? document.createElement('div'));
root.render(<Counter />);