React Ref

Not to be confused with Reason ref, the language feature that enables mutation.

A ReasonReact ref would be just another instance variable. You'd type it as ReasonReact.reactRef if it's attached to a custom component, and Dom.element if it's attached to a React DOM element.

RE
type state = {
  isOpen: bool,
  mySectionRef: ref(option(ReasonReact.reactRef))
};

let setSectionRef = (theRef, {ReasonReact.state}) => {
  state.mySectionRef := Js.Nullable.toOption(theRef);
  /* wondering about Js.Nullable.toOption? See the note below */
};

let component = ReasonReact.reducerComponent("MyPanel");

let make = (~className="", _children) => {
  ...component,
  initialState: () => {
    isOpen: false,
    mySectionRef: ref(None),
  },
  reducer: /* ... */,
  render: (self) => <Section1 ref={self.handle(setSectionRef)} />
};

Attaching to a React DOM element looks the same: state.mySectionRef = {myDivRef: Js.Nullable.toOption(theRef)}.

Note how ReactJS refs can be null. Which is why theRef and myDivRef are converted from a JS nullable to an OCaml option (Some/None). When you use the ref, you'll be forced to handle the null case through a switch, which prevents subtle errors!

You must follow the instanceVars convention in the previous section for ref.

ReasonReact ref only accept callbacks. The string ref from ReactJS is deprecated.

We also expose an escape hatch ReasonReact.refToJsObj of type ReasonReact.reactRef => Js.t {..}, which turns your ref into a JS object you can freely use; this is only used to access ReactJS component class methods.

RE
let handleClick = (event, self) =>
  switch (self.state.mySectionRef^) {
  | None => ()
  | Some(r) => ReasonReact.refToJsObj(r)##someMethod(1, 2, 3) /* I solemnly swear that I am up to no good */
  };