{"id":11578,"library":"preact","title":"Preact","description":"Preact is a lightweight, 3KB JavaScript library offering a React-compatible API for building user interfaces with a Virtual DOM. Currently in its stable v10.29.1 series, it maintains a rapid release cadence with frequent patch and minor updates, alongside public betas for upcoming major versions like 11.0.0-beta.1. Key differentiators include its extremely small footprint, which is beneficial for performance and bundle size, while largely replicating the modern React API including hooks, functional components, and class components. It offers extensive compatibility with the React ecosystem through its `preact/compat` alias, enabling many existing React libraries to function with minimal configuration. Preact features an optimized diffing algorithm, supports Server-Side Rendering (SSR), and includes developer tools and Hot Module Replacement (HMR) capabilities. It targets all modern browsers and maintains compatibility with IE11, providing a robust yet minimal alternative for web development.","status":"active","version":"10.29.1","language":"javascript","source_language":"en","source_url":"https://github.com/preactjs/preact","tags":["javascript","preact","react","ui","user interface","virtual dom","vdom","components","dom diff","typescript"],"install":[{"cmd":"npm install preact","lang":"bash","label":"npm"},{"cmd":"yarn add preact","lang":"bash","label":"yarn"},{"cmd":"pnpm add preact","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"`h` is the JSX factory function; `render` mounts Preact components to the DOM. Modern Preact primarily uses ES Modules.","wrong":"const { h, render } = require('preact');","symbol":"h, render","correct":"import { h, render } from 'preact';"},{"note":"For class-based components, `Component` is imported directly from the `preact` package. Older setups might have used a separate path.","wrong":"import Component from 'preact/Component';","symbol":"Component","correct":"import { Component } from 'preact';"},{"note":"Preact 10+ exports common hooks directly from the main `preact` package, mimicking React's hook API. Avoid accidentally importing from 'react'.","wrong":"import { useState } from 'react';","symbol":"useState, useEffect","correct":"import { useState, useEffect } from 'preact';"},{"note":"Used for grouping multiple elements without adding an extra DOM node. Can be used with JSX `<Fragment>...</Fragment>` or `<>...</>` (if configured).","wrong":"import { Fragment } from 'react';","symbol":"Fragment","correct":"import { Fragment } from 'preact';"}],"quickstart":{"code":"import { h, render } from 'preact';\n// Configure JSX pragma for TypeScript or Babel via tsconfig.json or babel.config.js\n// For TypeScript, add \"jsxFactory\": \"h\" to your compilerOptions.\n// For Babel, configure @babel/plugin-transform-react-jsx with 'pragma': 'h'.\n// Alternatively, add this pragma comment to the top of your JSX files:\n/** @jsx h */\n\nfunction Greeting({ name }) {\n  return (\n    <main>\n      <h1>Hello, {name}!</h1>\n      <p>This is a simple Preact application.</p>\n      <button onClick={() => alert(`Welcome, ${name}!`)}>Say Hello</button>\n    </main>\n  );\n}\n\n// Initial render to the document body\nrender(\n  <Greeting name=\"World\" />,\n  document.body\n);\n\n// Update the component in-place after 3 seconds\nsetTimeout(() => {\n  render(\n    <Greeting name=\"Preact User\" />,\n    document.body\n  );\n}, 3000);","lang":"typescript","description":"This quickstart demonstrates how to create and render a basic functional Preact component using JSX, including an initial mount and an in-place update to the DOM."},"warnings":[{"fix":"Install `preact/compat` and configure your bundler to alias `react` and `react-dom` to `preact/compat`. Example for Webpack: `resolve.alias: { 'react': 'preact/compat', 'react-dom/test-utils': 'preact/compat/test-utils', 'react-dom': 'preact/compat' }`","message":"For extensive compatibility with the broader React ecosystem (e.g., UI libraries, router components), installing `preact/compat` and aliasing `react` and `react-dom` to `preact/compat` in your bundler configuration (e.g., Webpack, Rollup) is critical. Failing to do so will result in runtime errors when using React-dependent libraries.","severity":"breaking","affected_versions":">=10.0.0"},{"fix":"For TypeScript, add `\"jsxFactory\": \"h\"` to `compilerOptions` in `tsconfig.json`. For Babel, configure `@babel/plugin-transform-react-jsx` with `\"pragma\": \"h\"`. Alternatively, add `/** @jsx h */` at the top of each JSX/TSX file.","message":"Preact uses `h` (or `jsx` for modern JSX transform) as its JSX factory function. You must configure your build tools (Babel, TypeScript) to use this function when compiling JSX, otherwise you will encounter `ReferenceError: h is not defined` or similar errors.","severity":"gotcha","affected_versions":">=10.0.0"},{"fix":"Ensure your project's `package.json` includes `\"type\": \"module\"` if running directly in Node.js, or use a bundler (Webpack, Rollup, Vite) that correctly transpiles and resolves ES Modules for browser environments. Always prefer `import` statements.","message":"Modern Preact versions, especially since v10, are primarily designed for ES Modules. Attempting to use `require('preact')` in a pure CommonJS environment without proper transpilation or module resolution can lead to errors like `Cannot use import statement outside a module` or unexpected behavior. Use a bundler or ensure your Node.js environment is configured for ESM.","severity":"breaking","affected_versions":">=10.0.0"},{"fix":"Consult the official Preact v11 migration guide upon its stable release. Thoroughly test your application when upgrading from v10 to v11.","message":"Preact version 11 is in beta (`11.0.0-beta.1`) and is expected to introduce breaking changes. While `10.x` is stable, users should anticipate a migration effort when upgrading to the next major release.","severity":"breaking","affected_versions":">=11.0.0-beta.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Configure your `tsconfig.json` (`jsxFactory: \"h\"`) or Babel config (`@babel/plugin-transform-react-jsx` with `pragma: 'h'`) to use Preact's `h` function for JSX, or add `/** @jsx h */` to your files.","cause":"JSX factory function (`h`) is not configured for your build process (Babel/TypeScript).","error":"ReferenceError: h is not defined"},{"fix":"Ensure your project's `package.json` has `\"type\": \"module\"` for Node.js environments, or use a bundler (Webpack, Rollup, Vite) that handles ES module compilation for browser code.","cause":"Attempting to use ES module `import` syntax in a CommonJS context (e.g., an older Node.js environment or a non-bundled script without proper module configuration).","error":"Cannot use import statement outside a module"},{"fix":"Install `preact/compat` and configure your bundler (e.g., Webpack, Rollup) to alias `react` and `react-dom` imports to `preact/compat`.","cause":"A React-dependent library or component is being used in a Preact project without `preact/compat` being properly aliased to `react` and `react-dom` in the build configuration.","error":"React is not defined"},{"fix":"Ensure all hook calls are made directly within the top level of a functional component or a custom hook, and not inside loops, conditions, or nested functions.","cause":"A Preact hook (e.g., `useState`, `useEffect`) is being called outside of a functional component or a custom hook, violating the Rules of Hooks.","error":"Hooks can only be called inside the body of a function component."}],"ecosystem":"npm"}