Instance Variables
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 ref
s.
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.