useReactive

Reactive proxy object that re-renders on mutation.

Import

import { useReactive } from '@kamod-ch/hooks'

Live demo

Basic demo

Reactive proxy object that re-renders on mutation.

{
  "count": 0,
  "nested": {
    "label": "draft"
  }
}

import { useReactive } from '@kamod-ch/hooks'

export default function UseReactiveDemo() {
  const state = useReactive({ count: 0, nested: { label: 'draft' } })

  return (
    <div>
      <pre>{JSON.stringify(state, null, 2)}</pre>
      <div class="demo-actions">
        <button type="button" onClick={() => state.count++}>Increment</button>
        <button type="button" onClick={() => { state.nested.label = state.nested.label === 'draft' ? 'published' : 'draft' }}>Toggle label</button>
      </div>
    </div>
  )
}

API

TypeScript signature

declare function useReactive<S extends Record<string, any>>(initialState: S): S;
export default useReactive;
/

SSR considerations

This hook is safe to import during SSR. If your effect body touches the DOM, keep that work inside the effect callback.

Browser compatibility

Works in any modern browser supported by Preact.