---
title: 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](https://reasonml.github.io/docs/en/mutation.html).

```reason
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](https://reasonml.github.io/try.html? ) if you're ever interested.

