Skip to content

useReactive

Александр edited this page Jan 17, 2023 · 1 revision
export function useReactive<S>(initial: S): S

Accepts a state object.

Returns a copy of the state object.
When it is changed, the component is updated.

import { afc, useReactive } from 'react-afc'

function Component(props) {
  const state = useReactive({
    count: 0
  })

  function onCountInput(event) {
    state.count = +event.target.value
  }

  function onButtonClick() {
    state.count++
  }

  return () => <>
    <p>Count: {state.count}</p>
    <input value={state.count} onChange={onCountInput}/>
    <button onClick={onButtonClick}>
      count++
    </button>
  </>
}

export default afc(Component)
Clone this wiki locally