ReasonReact

ReasonReact

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

›Record API (deprecated)

Getting Started

  • What & Why
  • Installation
  • Intro Example

Core

  • Components
  • JSX (Version 3)
  • Event
  • Style
  • Router
  • Working with DOM
  • Refs in React

ReactJS Idioms Equivalents

  • Invalid Prop Name
  • Props Spread
  • Component as Prop
  • Ternary Shortcut
  • Context & Mixins
  • Custom Class/Component Property

Record API (deprecated)

  • JSX (Old, Version 2)
  • Creation, Props & Self
  • Render
  • Callback Handlers
  • State, Actions & Reducer
  • Lifecycles
  • Instance Variables
  • React Ref
  • Talk to Existing ReactJS Code
  • cloneElement
  • Children
  • Subscriptions Helper
  • Router

FAQ

  • I'm Having a Type Error
  • Record Field send/handle Not Found
  • send/handle callbacks having Incompatible Types
  • I Really Need Feature X From ReactJS
  • Element Type is Invalid Runtime Error
Translate

Lifecycles

The Record API is in feature-freeze. For the newest features and better support going forward, please consider migrating to the new function components.

ReasonReact supports the familiar ReactJS lifecycle events.

didMount: self => unit

willReceiveProps: self => state

shouldUpdate: oldAndNewSelf => bool

willUpdate: oldAndNewSelf => unit

didUpdate: oldAndNewSelf => unit

willUnmount: self => unit

Note:

  • We've dropped the component prefix from all these.
  • willReceiveProps asks for the return type to be state, not update state (i.e. not NoUpdate/Update/SideEffects/UpdateWithSideEffects). We presume you'd always want to update the state in this lifecycle. If not, simply return the previous state exposed in the lifecycle argument.
  • didUpdate, willUnmount and willUpdate don't allow you to return a new state to be updated, to prevent infinite loops.
  • willMount is unsupported. Use didMount instead.
  • didUpdate, willUpdate and shouldUpdate take in a oldAndNewSelf record, of type {oldSelf: self, newSelf: self}. These two fields are the equivalent of ReactJS' componentDidUpdate's prevProps/prevState/ in conjunction with props/state. Likewise for willUpdate and shouldUpdate.

If you need to update state in a lifecycle event, simply send an action to reducer and handle it correspondingly: self.send(DidMountUpdate).

Some new lifecycle methods act differently. Described below.

Access next or previous props: retainedProps

One pattern that's sometimes used in ReactJS is accessing a lifecycle event's prevProps (componentDidUpdate), nextProps (componentWillUpdate), and so on. ReasonReact doesn't automatically keep copies of previous props for you. We provide the retainedProps API for this purpose:

type retainedProps = {message: string};

let component = ReasonReact.statelessComponentWithRetainedProps("RetainedPropsExample");

let make = (~message, _children) => {
  ...component,
  retainedProps: {message: message},
  didUpdate: ({oldSelf, newSelf}) =>
    if (oldSelf.retainedProps.message !== newSelf.retainedProps.message) {
      /* do whatever sneaky imperative things here */
      Js.log("props `message` changed!")
    },
  render: (_self) => /* ... */
};

We expose ReasonReact.statelessComponentWithRetainedProps and ReasonReact.reducerComponentWithRetainedProps. Both work like their ordinary non-retained-props counterpart, and require you to specify a new field, retainedProps (of whatever type you'd like) in your component's spec in make.

willReceiveProps

Traditional ReactJS componentWillReceiveProps takes in a nextProps. We don't have nextProps, since those are simply the labeled arguments in make, available to you in the scope. To access the current props, however, you'd use the above retainedProps API:

type state = {someToggle: bool};

let component = ReasonReact.reducerComponentWithRetainedProps("MyComponent");

let make = (~name, _children) => {
  ...component,
  initialState: () => {someToggle: false},
  /* just like state, the retainedProps field can return anything! Here it retained the `name` prop's value */
  retainedProps: name,
  willReceiveProps: (self) => {
    if (self.retainedProps === name) {
      /* ... */
      /* previous ReactJS logic would be: if (props.name === nextProps.name) */
    };
    /* ... */
  }
};

willUpdate

ReactJS' componentWillUpdate's nextProps is just the labeled arguments in make, and "current props" (aka this.props) is the props you've copied into retainedProps, accessible via {oldSelf}:

{
  ...component,
  willUpdate: ({oldSelf, newSelf}) => /* ... */
}

didUpdate

ReactJS' prevProps is what you've synced in retainedProps, under oldSelf.

shouldUpdate

ReactJS' shouldComponentUpdate counterpart.

← State, Actions & ReducerInstance Variables →
  • Access next or previous props: retainedProps
  • willReceiveProps
  • willUpdate
  • didUpdate
  • shouldUpdate