Docs / ReasonReact / InstanceVariables

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(int)) }; 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(/* ... */)); /* no extra state update needed */ ReasonReact.NoUpdate }, 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.