DocsBlog

  • 1.1.2

  • light

    dark

    system

    Switch mode

  • Cerberus

    Acheron

    Elysium

Get Started
Components
Data Grid
Signals
Styling
Theming

Get Started

OverviewReactivityData FetchingStores

Primitives

createSignalcreateQuerycreateMutationcreateComputedcreateEffectcreateStoreContextbatch

Hooks

useQueryuseMutationuseReaduseSignal

Components

ReactiveText

On this page

  • Edit this page on Github

Reactive Text

Learn how to read signals with fine-grained reactivity in React.

  • source
import { ReactiveText } from '@cerberus/signals'

Usage

ReactiveText was created to provide fine-grained updates to the VDOM without triggering component re-renders when the signal updates.

This allows React to function as close as possible to SolidJS where the JSX only renders once.

Reading State

To render a signal, just pass the Accessor function to the data prop.

Note

The data prop expects either a String or Number value.

To render complex lists, utilize the For component to loop through the content and then ReactiveText to display specific signal nodes.

API

ReactiveText accepts the following options:

ParamsRequiredDescription
dataString | NumberThe Accessor to watch and render in the UI.
Copy
'use client'

import { HStack } from '@/styled-system/jsx'
import { Button, Text } from '@cerberus/react'
import { createSignal, ReactiveText } from '@cerberus/signals'

function createDemoStore() {
  const [count, setCount] = createSignal<number>(0)
  const [renderCount, setRenderCount] = createSignal<number>(0)
  return { count, setCount, renderCount, setRenderCount }
}

export function BasicDemo() {
  const store = createDemoStore()
  const increment = () => store.setCount(store.count() + 1)

  store.setRenderCount(store.renderCount() + 1)

  return (
    <HStack justify="space-between" w="3/4">
      <HStack gap="md" w="full">
        <Button onClick={increment}>Increment</Button>
        <ReactiveText data={store.count} />
      </HStack>

      <HStack gap="md" w="full">
        <Text>Render Count:</Text>
        <ReactiveText data={store.renderCount} />
      </HStack>
    </HStack>
  )
}
0

Render Count:

1