Integration with Preact

Observable comes with a built-in observer HOC for Preact.

observer

The observer utility wraps a Preact component and makes it reactive by automatically tracking observables used during rendering. When any of those observables change, the component re-renders.

Since observer is built on the same reactivity system as autorun, it benefits from the same optimizations — like dependency tracking and batching updates. This means applications using Observable are highly optimized by default.

WARNING

observer can only be used with functional components.

Syntax

import { observer } from 'kr-observable/preact';
          
const Component = observer(fc)

Arguments

1. Preact functional component
2. An optional Boolean flag that when is true enables logging. Observable will print to console info about each render/re-render including reasons.

   TIP

   Avoid using arrow functions with observer, that will make logs more readable.

Return value

Preact functional component

Example

import { observer } from 'kr-observable/preact';
          
const ListItem = observer(function listItem({ post }) {
  return (
    <div>{post.title}</div>
  )
})