​

Compat API Overview

​

Installation

npm install preact

​

Import Patterns

​

Aliasing React to Preact

// Using webpack
resolve: {
  alias: {
    'react': 'preact/compat',
    'react-dom': 'preact/compat'
  }
}

​

Direct Import

import React from 'preact/compat';
import { useState, useEffect } from 'preact/compat';

​

Exported APIs

​

Core Components

• Component - Base component class
• PureComponent - Component with shallow prop/state comparison
• Fragment - Wrapper component that renders children without a DOM node
• StrictMode - Development mode helper (passthrough in Preact)

​

Element Creation

• createElement - Create a virtual DOM node
• createFactory - Legacy factory function for creating elements
• cloneElement - Clone and return a new element
• isValidElement - Check if an object is a valid element
• isFragment - Check if an element is a Fragment
• isMemo - Check if a component is memoized

​

Refs

• createRef - Create a ref object
• forwardRef - Forward refs to child components

​

Context

• createContext - Create a Context object

​

Higher-Order Components

• memo - Memoize functional components
• forwardRef - Pass refs through components

​

Hooks

• useState - State management
• useEffect - Side effects
• useLayoutEffect - Synchronous side effects
• useContext - Access context values
• useReducer - Complex state management
• useCallback - Memoize callbacks
• useMemo - Memoize computed values
• useRef - Mutable ref objects
• useImperativeHandle - Customize ref values
• useDebugValue - Debug custom hooks
• useId - Generate unique IDs

​

React 18 Hooks

• useInsertionEffect - Insert styles before layout effects
• useTransition - Mark updates as transitions
• useDeferredValue - Defer value updates
• useSyncExternalStore - Subscribe to external stores
• startTransition - Mark updates as non-urgent

​

Suspense

• Suspense - Suspend rendering while loading async data
• lazy - Lazy load components

​

Utilities

• Children - Utilities for manipulating children
• createPortal - Render children into a different DOM node
• render - Render a component into a container
• hydrate - Hydrate server-rendered markup
• unmountComponentAtNode - Remove a mounted component
• findDOMNode - Get the DOM node for a component
• flushSync - Flush updates synchronously (no-op in Preact)
• unstable_batchedUpdates - Batch state updates (no-op in Preact)

​

Version

import { version } from 'preact/compat';

console.log(version); // "18.3.1"

​

Type Definitions

• Component types and interfaces
• Event types
• HTML and SVG attribute types
• Hook types
• Utility types

​

Differences from React

1. flushSync - Implemented as a passthrough function
2. unstable_batchedUpdates - Implemented as a passthrough function
3. StrictMode - Renders children without additional checks
4. Preact is faster and smaller than React

​

Source Files

• compat/src/index.js:1-237 - Main exports
• compat/src/index.d.ts:1-433 - TypeScript definitions