til / Rescript - using usestate in rescript-react

React has a useState hook that’s great for keeping track of some simple state. rescript-react also has this hook, but the API is a bit different in that it only contains the function variations of useState. Here’s a basic example that extends the example we created previously.

@react.component
let make = () => {
  let (displayValue, setDisplayValue) = React.useState(() => false)

  <div>
    {displayValue ? React.string("The best value") : React.null}
    <Button onClick={_ => setDisplayValue(displayValue => !displayValue)}>
      {React.string("Toggle value")}
    </Button>
  </div>
}

React.useState takes a function where the return value is our initial state. In return, we get a tuple of the current state and a setter. The types for the return values are inferred from the initial state. In this case the types are bool for displayValue and (bool => bool) => unit for setDisplayValue.

We could then use the value, defined as displayValue in our example, to conditionally display a text. Both sides of the ternary need to have the same type so we use React.null, which maps to React.element like React.string does, when we don’t want to display anything.

To update the value we call the setter function, defined as setDisplayValue in our example. In this case, we toggle the displayValue based on the previous value.

The bindings for useState to the React implementation acknowledges that the API isn’t the best, but the only way to implement the state with type safety. The recommendation is to use useReducer whenever possible.