@signaldb/react

createUseReactivityHook

import { createUseReactivityHook } from '@signaldb/react'
import { effect } from '…'

const useReactivity = createUseReactivityHook(effect)

This function creates a custom hook that provides reactivity to your components. It takes a function as the single argument that specifies the effect function of a reactive library. The effect function must have the following signature:

(reactiveFunction: () => void) => () => void

The provided function is called with a reactive function that should be executed when the reactivity changes. The returned function is the cleanup function that removes the effect.

Return value

createUseReactivityHook returns the useReactivity hook:

useReactivity<T>(reactiveFunction: () => T, deps?: DependencyList): T

• reactiveFunction - Runs inside the effect of your reactive library. Its return value is what the hook returns, and the component re-renders whenever a reactive dependency read inside it changes.
• deps - (Optional) A React dependency list. When one of its values changes, the effect is stopped and reactiveFunction runs again in a new one. Default is [].

The effect is stopped when the component unmounts.

const PostList = ({ author }) => {
  const posts = useReactivity(() => Posts.find({ author }).fetch(), [author])
  return <ul>{posts.map(post => <li key={post.id}>{post.title}</li>)}</ul>
}

Also check out our guide on how to use SignalDB with React.