ReasonML: Eliminating illegal state

reasonMarch 23, 2018Dotby Alex

Next thing I’d like to share is how ReasonML helps in making illegal states unrepresentable in our apps.

Here’s the common pattern of shaping a state in JS apps:

type State = {|
  loading: boolean,

  data: Data | null,

  error: Error | null,

What’s wrong with this? Let’s see how it can be handled in UI:

render = () => (
    {this.state.loading && <Spinner />}

    {!this.state.loading && !this.state.error && (

    {this.state.error && <div>{this.state.error.message}</div>}

It can be improved a bit by re-shaping this state:

type State = {|

status: "loading" | "ready" | "error",

data: Data | null,

error: Error | null,


render = () => {

switch (this.state.status) {

case "loading":

    return <Spinner />;

case "ready":

    return <div>{}</div>;

case "error":

    return <div>{this.state.error.message}</div>;


    throw new Error("¯\_(ツ)_/¯");



But the main issue is still there: conditional dependencies between state properties. When loading === false (or status === "ready") it implicitly assumes that data is not null. No guarantees tho. Opened doors into an illegal state.

When you use Flow or TypeScript, these tools warn you that data might be null and you have to add all these annoying checks to calm type system down:

case "ready":

if (! {

    throw new Error("Uh oh no data");


return <div>{}</div>;

I look at the code above and I’m just sad.

The light

First of all, let me introduce you to the thing called variant.

type status =

| Loading

| Ready

| Error;

This is type similar to enum in TS except its parts are not strings (nor any other data type you familiar with from JS). These things called tags (or constructors).

Now the magic moment: every tag can hold its own payload!

type status =

| Loading

| Ready('data)

| Error('error);

If you’re not there yet, here’s the code (mixing Reason & JS just for clarity’s sake!):

type Status =

| Loading

| Ready('data)

| Error('error);

type State = {status: Status};

class Foo extends React.Component {

state = {status: Loading};

componentDidMount = () => {


      .then(data => this.setState({status: Ready(data)}))

      .catch(error => this.setState({status: Error(error)}));


render = ({state}) => (



        switch (state.status) {

        | Loading => <Spinner />

        | Ready(data) => <div>{}</div>

        | Error(error) => <div>{error.message}</div>






How beautiful is that! There’s no way to get into an illegal state in this component. Everything is type safe. Combine it with “everything is an expression” in Reason and you can use pattern matching at any point of your JSX render tree (spot switch as a child of <Layout />).

You know what to do.

Are you looking for a software development partner who can
develop modern, high-performance web apps and sites?
See what we've doneArrow right