Differences to React

Preact itself is not intended to be a reimplementation of React. There are differences. Many of these differences are trivial, or can be completely removed by using preact-compat, which is a thin layer over Preact that attempts to achieve 100% compatibility with React.

The reason Preact does not attempt to include every single feature of React is in order to remain small and focused - otherwise it would make more sense to simply submit optimizations to the React project, which is already a very complex and well-architected codebase.

Version Compatibility

For both Preact and preact-compat, version compatibility is measured against the current and previous major releases of React. When new features are announced by the React team, they may be added to Preact's core if it makes sense given the Project Goals. This is a fairly democratic process, constantly evolving through discussion and decisions made in the open, using issues and pull requests.

Thus, the website and documentation reflect React 0.14.x and 15.x when discussing compatibility or making comparisons.

What's Included?

• ES6 Class Components
  • classes provide an expressive way to define stateful components
• Higher-Order Components
  • components that return other components from render(), effectively wrappers
• Stateless Pure Functional Components
  • functions that receive props as arguments and return JSX/VDOM
• Contexts: Support for the legacy context API was added in Preact 3.0.
  • Support for the new api is discussed as PR #963.
• Refs: Support for function refs was added in Preact in 4.0. String refs are supported in preact-compat.
  • Refs provide a way to refer to rendered elements and child components.
• Virtual DOM Diffing
  • This is a given - Preact's diff is simple but effective, and extremely fast.
• h(), a more generalized version of React.createElement
  • This idea was originally called hyperscript and has value well beyond the React ecosystem, so Preact promotes the original standard. (Read: why `h()`?)
  • It's also a little more readable: h('a', { href:'/' }, h('span', null, 'Home'))

What's Added?

Preact actually adds a few convenient features inspired by work in the React community:

• this.props and this.state are passed to render() for you
  • You can still reference them manually. This is just cleaner, particularly when destructuring
• Batching of DOM updates, debounced/collated using setTimeout(1) (can also use requestAnimationFrame)
• You can just use class for CSS classes. className is still supported, but class is preferred.
• Component and element recycling/pooling.

What's Missing?

• PropType Validation: Not everyone uses PropTypes, so they aren't part of Preact's core.
  • PropTypes are fully supported in preact-compat, or you can use them manually.
• Children: Not necessary in Preact, because props.children is always an Array.
  • React.Children is fully supported in preact-compat.
• Synthetic Events: Preact's browser support target does not require this extra overhead.
  • Preact uses the browser's native addEventListener for event handling. See GlobalEventHandlers for a full list of DOM event handlers.
  • A full events implementation would mean more maintenance and performance concerns, and a larger API.

What's Different?

Preact and React have some more subtle differences:

• render() accepts a third argument, which is the root node to replace, otherwise it appends. This may change slightly in a future version, perhaps auto-detecting that a replacement render is appropriate by inspecting the root node.
• Components do not implement contextTypes or childContextTypes. Children receive all context entries drawn from getChildContext().