ReasonReact

ReasonReact

  • Docs
  • Try
  • Examples
  • Community
  • Blog
  • Languages iconEnglish
    • 日本語
    • Español
    • Français
    • 한국어
    • Português (Brasil)
    • Русский
    • 中文
    • 繁體中文
    • Help Translate
  • GitHub

›Hooks

Getting Started

  • What & Why
  • Installation
  • Intro Example

Core

  • Components
  • JSX
  • Event
  • Style
  • Router
  • ReactDOM
  • Refs in React
  • Testing components

Hooks

  • useState
  • useReducer
  • useEffect
  • Custom Hooks

ReactJS Idioms Equivalents

  • Invalid Prop Name
  • Props Spread
  • Component as Prop
  • Ternary Shortcut
  • Context
  • Error boundaries

FAQ

  • I'm Having a Type Error
  • I Really Need Feature X From ReactJS
  • I want to create a DOM element without JSX
Edit

useReducer

React.js docs for useReducer

useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one. useReducer also lets you optimize performance for components that trigger deep updates because you can pass dispatch down instead of callbacks.

/* we can create anything as the type for action, here we use a variant with 2 cases. */
type action =
  | Increment
  | Decrement;

/* `state` could also be anything. In this case, we want an int */
let reducer = (state, action) =>
  switch (action) {
  | Increment => state + 1
  | Decrement => state - 1
  };

[@react.component]
  let make = (~initialValue=0) => {
    let (state, dispatch) = React.useReducer(reducer, initialValue);

    <section>
      <div className="value"> state->React.int </div>
      <button onClick={_ => dispatch(Increment)}>
        "Increment"->React.string
      </button>
      <button onClick={_ => dispatch(Decrement)}>
        "Decrement"->React.string
      </button>
    </section>;
  };
← useStateuseEffect →