Skip to content

Differences to React

Jason Miller edited this page Jan 28, 2016 · 11 revisions

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 an 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 focussed - otherwise it would make more sense to simply submit optimizations to the React project, which is already a very complex and well-architected codebase.

What's Included?

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
  • Linked State updates state when inputs change automatically
  • 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.
  • Setting class to an Object creates a String className containing the keys having truthy values.
  • Component and element recycling/pooling.

What's Missing?

  • Contexts: Support for context has been added and will be released in 3.0.
    • Context is an experimental React feature, but has been adopted by some libraries.
  • PropTypes: Not everyone uses them, so they aren't part of Preact's core.
  • Refs: Another less common optional feature, though this one will be added in Preact in 3.0.
    • Relying on refs is a sign you need more, smaller components.
  • Children: Not necessary in Preact.

What's Different?

There are currently a couple differences between Preact and React that are more subtle:

  • render() accepts a third argument, which is the root node to replace, otherwise it appends. This may change slightly in 3.0, perhaps auto-detecting that a replacement render is appropriate by inspecting the root node.
  • setState() is asynchronous because of batching. This is intentional and should not affect the outward-facing API.

Docs have moved!

Clone this wiki locally