React vs ReasonReact

Introduction

This tutorial primarily focuses on React and ReasonReact and their benefits and disadvantages. If you don’t already know what ReasonReact is, it can be thought of as a version of React that is built on the statically-typed functional programming language, Reason. In the next sections, we will briefly introduce React and ReasonReact before exploring their pros and cons.

What is React?

React is a popular JavaScript framework that makes it easy to build user interfaces for web applications. The framework, at the basic level, creates reusable components that are really self-contained modules that can render some form of output during runtime. Using these components, we are able to design small interfaces that can fuse up with other components to create the whole application.

React makes it possible for us to nest components and organize them inside higher-level components during application development. This can help us neatly define the overall structure.

There are strict rules that govern the data management process of each React component because developing interactive and complex user interfaces may involve complex data and application state manipulation. At the superficial level, React delivers to our hands the tools that we need to satisfactorily structure our application the way we want.

It has been great so far with ReactJS, but because it is built upon JavaScript, it inherits the loosely and dynamically typed system of JavaScript that some programmers of today’s JavaScript community might not particularly like. This leads us to introduce ReasonReact, which is simply a wrapper for React and shows significant improvement over ReactJS in certain areas.

Before we start digging into the technical details of ReasonReact, let’s briefly talk about Reason, the language upon which ReasonReact is built.

Reason is a relatively new statically-typed functional programming language that was developed by Facebook and adds a JavaScript-style syntax to OCaml. The language has a very powerful type system and leverages both the JavaScript and OCaml ecosystems. We can easily compile Reason code into JavaScript using BuckleScript. Reason is also suitable for cross-platform development.

Some of the benefits of writing programs in Reason are:

• A solid foundation for functional programming
• Incredible compiling speed
• Strongly typed

What is ReasonReact and why do we need it?

We can describe ReasonReact as a Reason wrapper for React that creates a safer and simpler way to build React components by leveraging Reason’s powerful type system, expressive language features and smooth interoperability with JavaScript. ReasonReact bundles React’ s features into an API that is:

• Safe and statically typed
• Simple and lean
• Familiar and easy to insert into an existing ReactJS codebase

While working with ReasonReact, writing routing, data management, component composition, and components feel just like using Reason. With ReasonReact, it is possible to write Reason code that cleanly compiles to idiomatic React. You can check out this link to see how great the compiled output looks.

Benefits of ReasonReact

We are going to look at some of the benefits that come with using ReasonReact. These benefits are primarily a result of the fact that ReasonReact is built off Reason, so it’s safe to assume that these benefits are Reason benefits.

Static and strongly typed

We are not just going to discuss this feature on the surface, instead, we will do a quick backtrace so we can see where this benefit of ReasonReact originates.

Remember how we said that ReasonReact is built upon Reason? Well, Reason is built on OCaml and OCaml is static and strongly typed. In fact, all values in an OCaml program are scrutinized to ensure that they are used the correct way. Whenever there is an attempt to use a value incorrectly, an error will be produced. This behavior eliminates an important class of bugs that are created when a value of one type is incorrectly treated as a value of another type, which would usually lead to the production of unexpected results and logic errors.

Consider this example, if we were going to do a proper variable declaration in ReasonReact, it would look something like this:

javascript
1let greeting: string = "Good morning!";
Copy

Though, it is possible for us to write the variable declaration without explicitly stating the type as we would do when writing regular JavaScript:

javascript
1let greeting = "Good morning!";
Copy

If we do this in our ReasonReact code, behind the scenes, Reason is smart enough to know that our new variable greeting is of the string type and it would register the type by itself. This behavior is called type inference.

Functional paradigm

The functional paradigm is one of the most hyped paradigms these days because of the benefits that are attached to it. In a functional language, functions are regarded as first-class citizens, this ensures that functions are more predictable and easier to test. It also significantly decreases the chances of the occurrences of unexpected behavior during run-time.

Consider the following code below:

javascript
1let age: int = 1;
2
3    List.map((x) => { age = x }, [1, 2, 3, 4])
Copy

In this example, we used the map method and attempted to reassign a new value to the age variable that is under the let binding. An attempt to run this program will produce an error because the compiler watches out for these kinds of behaviors. That isn’t all for Reason’s functional programming, there are additional benefits such as variants, an amazing pattern matching system and function currying.

Conclusion

In this tutorial, we have briefly explored ReactJS, Reason, and ReasonReact. The aim of this is to discuss the benefits and demerits of ReactJS and ReasonReact.

For more discussion of Reason, please join the Discord channel to ask the experts. You can also check out this comprehensive post I made that highlights the differences between JavaScript and Reason as well as their respective strengths and weaknesses.