observer() HOC#

The observer() Higher-Order Component (HOC) is used to make React components reactive to changes in TeamPlay signals.

Syntax#

observer(Component)

Parameters#

• Component: The React component to be made reactive.

Return Value#

Returns a new component that is reactive to TeamPlay signals.

Example#

import { observer, $ } from 'teamplay'

const UserProfile = observer(({ userId }) => {
  const $user = $.users[userId]
  return <div>{$user.name.get()}</div>
})

Features#

1. Reactivity: Components wrapped with observer() will automatically re-render when any TeamPlay signal they use changes.

2. Suspense Integration: observer() automatically wraps the component in a Suspense boundary, handling loading states for asynchronous operations.

Notes#

• Always wrap components that use TeamPlay signals with observer() to ensure they update when data changes.
• observer() optimizes re-renders by only updating when the specific data used in the component changes.