> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/preactjs/preact/llms.txt
> Use this file to discover all available pages before exploring further.

# Compat API Overview

> React compatibility layer for Preact - drop-in replacement for React with the same API

# Compat API Overview

The `preact/compat` package provides a React compatibility layer that allows you to use React components and libraries with Preact. It's a drop-in replacement for React that implements the React API on top of Preact.

## Installation

```bash theme={null}
npm install preact
```

## Import Patterns

### Aliasing React to Preact

The most common way to use compat is to alias `react` and `react-dom` to `preact/compat`:

```js theme={null}
// Using webpack
resolve: {
  alias: {
    'react': 'preact/compat',
    'react-dom': 'preact/compat'
  }
}
```

### Direct Import

You can also import directly from `preact/compat`:

```jsx theme={null}
import React from 'preact/compat';
import { useState, useEffect } from 'preact/compat';
```

## Exported APIs

### Core Components

* **[Component](/api/compat/pure-component)** - Base component class
* **[PureComponent](/api/compat/pure-component)** - 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](/api/compat/forward-ref)** - Forward refs to child components

### Context

* **createContext** - Create a Context object

### Higher-Order Components

* **[memo](/api/compat/memo)** - Memoize functional components
* **[forwardRef](/api/compat/forward-ref)** - Pass refs through components

### Hooks

All React hooks are available:

* **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](/api/compat/suspense)** - Suspend rendering while loading async data
* **lazy** - Lazy load components

### Utilities

* **[Children](/api/compat/children)** - Utilities for manipulating children
* **[createPortal](/api/compat/portals)** - 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

Preact's compat layer reports itself as React version `18.3.1` for maximum compatibility with third-party libraries.

```jsx theme={null}
import { version } from 'preact/compat';

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

## Type Definitions

Full TypeScript definitions are available in `preact/compat/src/index.d.ts`, including:

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

## Differences from React

While `preact/compat` aims for maximum compatibility, there are some minor differences:

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

The compat implementation can be found in:

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