ReasonReact

ReasonReact

  • Docs
  • Try
  • Examples
  • Community
  • Blog
  • Languages iconPortuguês (Brasil)
    • 日本語
    • English
    • Español
    • Français
    • 한국어
    • Русский
    • 中文
    • 繁體中文
    • 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
  • ReasonReactCompat: migrating to 0.7.0 and JSX v3
  • Testing ReasonReact components

ReactJS Idioms Equivalents

  • Invalid Prop Name
  • Props Spread
  • Component as Prop
  • Ternary Shortcut
  • Context & Mixins
  • Custom Class/Component Property
  • Using Event Values With useState
  • Error boundaries

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
  • I want to create a DOM element without JSX
Translate

Instance Variables

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

A common pattern in ReactJS is to attach extra variables onto a component's spec:

const Greeting = React.createClass({
  intervalId: null,
  componentDidMount: () => this.intervalId = setInterval(...),
  render: ...
});

In reality, this is nothing but a thinly veiled way to mutate a component's "state", without triggering a re-render. ReasonReact asks you to correctly put these instance variables into your component's state, into Reason refs.

type state = {
  someRandomState: option(string),
  intervalId: ref(option(Js.Global.intervalId))
};

let component = /* ... */; /* remember, `component` needs to be close to `make`, and after `state` type declaration! */

let make = (_children) => {
  ...component,
  initialState: () => {
    someRandomState: Some("hello"),
    intervalId: ref(None),
  },
  didMount: ({state}) => {
    /* mutate the value here */
    state.intervalId := Some(Js.Global.setInterval(/* ... */));
  },
  render: /* ... */
};

All your instance variables (subscriptions, refs, etc.) must be in state fields marked as a ref. Don't directly use a mutable field on the state record, use an immutable field pointing to a Reason ref. Why such constraint? To prepare for concurrent React which needs to manage side-effects & mutations more formally. More details here if you're ever interested.

← LifecyclesReact Ref →