Hello restate

This is Hello World with restate.

tsx

import { create } from '@restate/core'

// The `create` function creates the app state
//  and a hook `useAppState` to access the state:
const { useAppState } = create({
  state: {
    message: 'Hello restate'
  }
})

export function HelloRestate() {
  // Use the hook to select a property of your state.
  // The hook will return the value and a setter function.
  //
  // You know, just like the `useState` hook does. Nice, right?  🤩
  //
  const [message, setMessage] = useAppState((state) => state.message)

  return (
    <>
      <h1>Hello {message}!</h1>
      <input value={message} onChange={(e) => setMessage(e.target.value)} />
    </>
  )
}

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

First, we have to use the create function to create and initialize our store and to obtain the useAppState hook.

The useAppState hook takes one argument, a selector function: state => state.message. The selector function is used to select a property from the state, in this example the message property.

The useAppState hook returns an array with two elements: the selected property and a function to update the state. Just like the useState hook. Nice and simple. Isn't it?

And that's it (mostly)! Easy and simple.

There is an advanced example on Stackblitz you can play with.

Hello restate #

Hello restate