State
/ API Reference
State
/ API Reference

useOptimisticStore

useOptimisticStore is similar to useStore, but uses React's useOptimistic (new tab) under the hood for optimistic updates.

Arguments

ArgumentTypeDescription
actionsObject?A map of actions where the key represents the action name and the value represents the action reducer
modelany?Our store model reflecting the initial state shape

Returns

(Array) an array containing the state and actions to be used inside a React component.

Example

import * as React from 'react'
import { useOptimisticStore } from '@weser/state'

const model = 0
const actions = {
  increment: (prevState) => [prevState + 1],
  decrement: (prevState) => [prevState - 1],
}

function Counter() {
  const [state, { increment, decrement }] = useOptimisticStore(actions, model)

  return (
    <div>
      Count: {state}
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  )
}
On this page