Seitu
React

Hooks

Subscribe to a reactive value.

useSubscription()

Subscribe to a reactive value. Pass a handle or a factory (run once; recreated when deps change).

Sources with getServer (every seitu/web handle) use it for SSR and hydration; others use get(). getSnapshot skips selector/equality when source, selector, and version are unchanged — keep selector stable. Factories run during render (twice under StrictMode); keep them cheap and create long-lived resources at module scope.

Examples

Inline subscription

/app/page.tsx
'use client'

import {  } from 'seitu/web'
import {  } from 'seitu/react'
import * as  from 'zod'

export default function () {
  const  = (() => ({
    : 'sessionStorage',
    : 'test',
    : 0,
    : .(),
  }))

  return <>{}</>
}

Instance outside of component

/app/page.tsx
'use client'

import {  } from 'seitu/web'
import {  } from 'seitu/react'
import * as  from 'zod'

const  = ({
  : 'sessionStorage',
  : { : .(), : .() },
  : { : 0, : '' },
})

export default function () {
  const  = ()
  return <>{.}</>
}

Subscription with selector

/app/page.tsx
'use client'

import {  } from 'seitu/web'
import {  } from 'seitu/react'
import * as  from 'zod'

const  = ({
  : 'sessionStorage',
  : {
    : .(),
    : .(),
  },
  : { : 0, : '' },
})

export default function () {
  // Re-renders only when count changes
  const  = (, { :  => . })

  return <>{}</>
}

Element from a callback ref

/app/page.tsx
'use client'

import * as React from 'react'
import {  } from 'seitu/web'
import {  } from 'seitu/react'

export default function () {
  // A callback ref plus `deps` rebuilds on remount; `() => ref.current` binds once.
  const [, ] = React.<HTMLDivElement | null>(null)
  const  = (
    () => ({ : , : 'vertical' }),
    { : [] }
  )

  return (
    < ={}>
      {(..)}
    </>
  )
}

Edit on GitHub

Last updated on

On this page