useNext Hook

If don't need to read from the store, and you only want to modify the state, you may want to use the useNext hook.

tsx

function ResetButton() {
  const setAge = useNext((s) => s.age)

  return <button onClick={() => setAge(32)}>Reset</button>
}

1
2
3
4
5

The nextHook does not trigger a re-renders if the state changes (but the useAppState hook does).

Example

tsx

import { create } from '@restate/core'

const { useAppState, useSelector, useNext } = create({
  state: {
    user: {
      name: 'John',
      age: 32
    }
  }
})

function Greeting() {
  const greeting = useSelector((s) =>
    s.user.age < 30 ? `Hi ${s.user.name}` : `God day Sir`
  )

  return <h1> {greeting}!</h1>
}

function AgeInput() {
  const [age, setAge] = useAppState((s) => s.user.age)
  return (
    <input
      value={age}
      type="number"
      onChange={(e) => setAge(Number(e.target.value))}
    />
  )
}

function ResetAgeButton() {
  const setAge = useNext((s) => s.user.age)
  return (
    <>
      <button onClick={() => setAge(32)}>Reset age to 32</button>
      <button onClick={() => setAge(20)}>Reset age to 20</button>
    </>
  )
}

export function HelloSelectorAndNext() {
  return (
    <div className="layout">
      <Greeting />
      <AgeInput />
      <ResetAgeButton />
    </div>
  )
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

Full example on https://stackblitz.com/edit/hello-restate

useNext Hook #

Example #

useNext Hook

Example