useState

Usage

let (state, setState) = React.useState(_ => initialState)

During the initial render, the returned state state is the same as the value passed as the first argument (initialState).

The setState function can be passed down to other components as well, which is useful for e.g. setting the state of a parent component by its children.

Examples

Using State for a Text Input

RES
@react.component
let make = () => {
  let (text, setText) = React.useState(_ => "");

  let onChange = evt => {
    ReactEvent.Form.preventDefault(evt)
    let value = ReactEvent.Form.target(evt)["value"]
    setText(_prev => value);
  }

  <div>
    <input onChange value=text />
  </div>
};

Passing setState to a Child Component

In this example, we are creating a ThemeContainer component that manages a darkmode boolean state and passes the setDarkmode function to a ControlPanel component to trigger the state changes.

// ThemeContainer.res
module ControlPanel = {
  @react.component
  let make = (~setDarkmode, ~darkmode) => {
    let onClick = evt => {
      ReactEvent.Mouse.preventDefault(evt)
      setDarkmode(prev => !prev)
    }

    let toggleText = "Switch to " ++ ((darkmode ? "light" : "dark") ++ " theme")

    <div> <button onClick> {React.string(toggleText)} </button> </div>
  }
}

@react.component
let make = (~content) => {
  let (darkmode, setDarkmode) = React.useState(_ => false)

  let className = darkmode ? "theme-dark" : "theme-light"

  <div className>
    <section>
      <h1> {React.string("More Infos about ReScript")} </h1> content
    </section>
    <ControlPanel darkmode setDarkmode />
  </div>
}

Note that whenever setDarkmode is returning a new value (e.g. switching from true -> false), it will cause a re-render for ThemeContainer's className and the toggle text of its nested ControlPanel.

Uncurried Version

For cleaner JS output, you can use React.Uncurried.useState instead:

let (state, setState) = React.Uncurried.useState(_ => 0)

setState(. prev => prev + 1)