Differences to React

AlexKrautmann edited this page Jun 19, 2017 · 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 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.

What's Included?

  • ES6 Class Components
    • classes provide an expressive way to define stateful components
  • High-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 context was added in Preact 3.0.
    • Context is an experimental React feature, but has been adopted by some libraries.
  • 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 (read: why h()?)

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.
  • 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.
  • Synthetic Events: Preact's browser support target does not require this extra overhead.
    • A full events implementation would mean more maintenance and performance concerns, and a larger API.

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 a future version, perhaps auto-detecting that a replacement render is appropriate by inspecting the root node.
  • setState() is asynchronous because of batching. This is intentional and does not affect the outward-facing API.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.