React

React is a JavaScript library for building user interfaces that lets you create interactive UIs in a declarative way through components. It supports both client-side rendering in browsers and server-side rendering for better performance and SEO.

Quick References

File	Purpose
`packages/react/index.js`	Main React package entry point with core APIs
`packages/react-dom/index.js`	ReactDOM entry point for DOM utilities
`packages/react-dom/src/client/ReactDOMClient.js`	`createRoot` and `hydrateRoot` APIs
`README.md`	Project overview and documentation links

Packages

Package	npm name	Description
`packages/react`	`react`	Core React library with components and hooks
`packages/react-dom`	`react-dom`	DOM renderer for web browsers
`packages/react-dom/client`	`react-dom/client`	Client-side rendering APIs (`createRoot`, `hydrateRoot`)
`packages/react-dom/server`	`react-dom/server`	Server-side rendering APIs (`renderToPipeableStream`, `renderToReadableStream`)
`packages/react-test-renderer`	`react-test-renderer`	Deprecated snapshot testing renderer
`packages/react-is`	`react-is`	Runtime type checking for React elements
`packages/use-sync-external-store`	`use-sync-external-store`	Backwards-compatible shim for `useSyncExternalStore` hook
`packages/react-refresh`	`react-refresh`	Fast Refresh integration for bundlers
`packages/scheduler`	`scheduler`	Cooperative scheduling (internal React dependency)

When to Use

Building modern single-page applications with dynamic, interactive user interfaces
Creating reusable component libraries for complex UIs with state management needs
Implementing server-side rendering for improved performance and SEO in web applications
Developing applications that need both client and server-side rendering (isomorphic/universal)
Building progressive web applications with optimistic UI updates

Installation

# Core React and DOM renderer
npm install react react-dom

# Additional utilities as needed
npm install react-is
npm install use-sync-external-store

Best Practices

Use functional components with hooks - Prefer modern functional components and hooks over class components for better code organization and reusability
Keep components pure - Components should return consistent output for the same props and state to ensure predictable behavior
Minimize state updates - Batch related state updates together and use useCallback/useMemo to prevent unnecessary re-renders
Use production builds - Always use the production build when deploying to get smaller bundle size and better performance
Prefer declarative updates - Use useActionState for form actions and declarative state management over imperative approaches

Common Patterns

Basic Component with State:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Mounting an Application:

import { createRoot } from 'react-dom/client';

function App() {
  return <div>Hello World</div>;
}

const root = createRoot(document.getElementById('root'));
root.render(<App />);

Server-Side Rendering:

import { renderToPipeableStream } from 'react-dom/server';

function App() {
  return <div>Hello World</div>;
}

// Node.js server
const stream = renderToPipeableStream(<App />, {
  onShellReady() {
    response.statusCode = 200;
    response.setHeader('Content-type', 'text/html');
    stream.pipe(response);
  },
});

Hydrating Existing HTML:

import { hydrateRoot } from 'react-dom/client';

hydrateRoot(document.getElementById('root'), <App />);

Type Checking with react-is:

import * as ReactIs from 'react-is';

ReactIs.isElement(<div />); // true
ReactIs.isFragment(<></>); // true
ReactIs.isPortal(portal); // true

Custom Hooks with External Stores:

import { useSyncExternalStore } from 'react';

function useWindowWidth() {
  return useSyncExternalStore(
    subscribe => {
      window.addEventListener('resize', subscribe);
      return () => window.removeEventListener('resize', subscribe);
    },
    () => window.innerWidth
  );
}

API Quick Reference

Core React

Export	Type	Description
`Component`, `PureComponent`	Class	Base classes for class components
`Fragment`	Component	Group multiple elements without extra DOM nodes
`StrictMode`	Component	Development-only tool for detecting potential issues
`Suspense`	Component	Display fallback while waiting for async operations
`createContext`	Function	Creates context for passing data through component tree
`createElement`	Function	Programmatic creation of React elements
`forwardRef`	HOC	Forward refs to child components
`lazy`	Function	Lazy load component code
`memo`	HOC	Memoize component to prevent unnecessary re-renders
`useState`	Hook	Add state to functional components
`useEffect`	Hook	Perform side effects in functional components
`useRef`	Hook	Persist values across renders without causing re-renders
`useCallback`	Hook	Memoize callback functions
`useMemo`	Hook	Memoize expensive calculations
`useContext`	Hook	Read context values
`useReducer`	Hook	Manage complex state with reducer pattern
`useTransition`	Hook	Mark state updates as transitions
`startTransition`	Function	Start a transition for non-urgent updates
`useDeferredValue`	Hook	Defer updates to less critical values
`useId`	Hook	Generate unique IDs with consistent server/client value
`useActionState`	Hook	Manage form action state
`useOptimistic`	Hook	Optimistically update UI before server confirmation
`useEffectEvent`	Hook	Create functions that don't change between renders
`useInsertionEffect`	Hook	Insert styles before DOM mutations
`useImperativeHandle`	Hook	Expose imperative methods to parent components
`cache`	Function	Cache computed values
`cacheSignal`	Function	Signal for cache invalidation

ReactDOM Client

Export	Type	Description
`createRoot`	Function	Create a root for concurrent rendering
`hydrateRoot`	Function	Hydrate server-rendered HTML

ReactDOM

Export	Type	Description
`createPortal`	Function	Render children into a different DOM node
`flushSync`	Function	Force synchronous execution of updates
`prefetchDNS`	Function	Prefetch DNS resolution
`preconnect`	Function	Preconnect to origins
`preload`	Function	Preload resources
`preloadModule`	Function	Preload JavaScript modules
`preinit`	Function	Preinit stylesheets and scripts
`preinitModule`	Function	Preinit JavaScript modules with inline execution
`unstable_batchedUpdates`	Function	Batch multiple updates together (no-op, kept for compatibility)
`useFormStatus`	Hook	Access form submission status
`useFormState`	Hook	Manage form state based on server actions

ReactDOM Server

Export	Type	Description
`renderToPipeableStream`	Function	Render to a Node.js writable stream
`renderToReadableStream`	Function	Render to a Web Stream
`renderToString`	Function	Render to string (legacy)
`renderToStaticMarkup`	Function	Render to static HTML without data attributes

react-is

Export	Type	Description
`isValidElementType`	Function	Check if a value is a valid React element type
`typeOf`	Function	Get the type of a React element
`isElement`	Function	Check if value is a React element
`isFragment`	Function	Check if value is a Fragment
`isPortal`	Function	Check if value is a Portal
`isMemo`	Function	Check if value is a memoized component
`isLazy`	Function	Check if value is a lazy component
`isForwardRef`	Function	Check if value is a forwardRef component
`isSuspense`	Function	Check if value is a Suspense boundary

use-sync-external-store

Export	Type	Description
`useSyncExternalStore`	Hook	Subscribe to external store data (polyfill for React < 18)

facebook-react