-
-
Notifications
You must be signed in to change notification settings - Fork 2k
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 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.
- ES6 Class Components
-
High-Order Components
- components that return other components from
render()
, effectively wrappers
- components that return other components from
-
Stateless Pure Functional Components
- functions that receive
props
as arguments and return JSX/VDOM
- functions that receive
- Simple but effective Virtual DOM diffing
-
h()
, a more generalized version ofReact.createElement
(read: whyh()
?)
Preact actually adds a few convenient features inspired by work in the React community:
-
this.props
andthis.state
are passed torender()
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, butclass
is preferred. - Setting
class
to an Object creates a String className containing the keys having truthy values. - Component and element recycling/pooling.
-
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.
- PropTypes are supported in preact-compat.
-
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.
- If you absolutely must use it, use preact-compat.
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.
Notice: All documentation has moved to preactjs.com →