We know what you’re thinking: ReactJS seems to be a strange choice for IoT projects. Isn’t it just another front-end framework for simple websites? Shouldn’t IoT technologies use something with more muscle? No, not really. You can use React in many different ways. There are ReactJS for web development, React Native for cross-platform mobile development, React-three for 3D-rendering, React-360 for building 3D and VR interfaces. Yes, there is ReactJS for server-side IoT needs.

Is this JavaScript library good enough for your next IoT project? Let’s compare React’s assets to find the answer.

The perks of using ReactJS for IoT solutions

React has some great features which make it useful for Internet of Things projects.

Compositional structure

React enables compositional structure of a project, rather than a structure based on inheritance. Basically, it helps you better organize the code. In regular OOP, you have to create a class or an object and then another object inherits this class or object. This means the whole thing can get very messy over time. The inheritance model for a large IoT project can get very complicated and hard to follow. But with React, building an application is like building a Lego set. You create a component and you can use other components within it. For instance, you can create and use components for certain IoT devices.

Separation of concerns

Since in React each component is on its own, you can work with it in isolation. In other words, you don’t have to worry about how changing one component affects the rest of the code. Thanks to the separation of concerns in React, components know nothing more than needed. It’s possible to handle data in one place and pass it down to children components. Components receiving and processing data can be easily separated from sensor components. This means you don’t get lost in complex code interactions between IoT sensors and data. Children components cannot affect parent components.

In React, data is passed to the components via props. Props is an object containing information about a component. It’s a great tool for communication between parent and child components. You can pass props, be it anything like numbers, strings or functions, to the components. Props are connected to the state which stores data. If the state changes, the component re-renders, making the application intact with the latest data.

But why is this important for IoT projects? Building a component-based application allows creating two types of components. First, the ones which receive, process and pass data to children components and second, the components which correspond to IoT sensors. They receive or pass props and act accordingly without having access to more data than needed.

Lifecycle methods

Lifecycle methods is another great feature of the React JavaScript library serving IoT projects well. It ensures all the components keep up with data changes. Simply put, it makes the application’s interactions with the real world easy. Each time a component updates, it launches a sequence of lifecycle methods. For instance, a temperature change triggers a new cycle.

Imagine a smart home. When the temperature rises to 25 C, the application tells the Led component to turn on to tell the user it’s getting hot inside. But if the temperature doesn’t exceed the limit, the cycle stops, and the component doesn't update further.

Lifecycle methods are an easy way of handling the app’s updates. Every time new data come from the real world, the application checks if it’s adequate and updates the components. 

The ugly truth about ReactJS

Despite the benefits, React isn’t a popular tool for IoT software development. Let’s explore why.

React is open-source

React is an open-source solution, and it doesn’t get proper support. The integration of libraries can often cause conflicts and make the application behave unpredictably. React lacks the reliability and stability of Node.js, and for a massive Industrial IoT application, they are vital.

React is UI-oriented

React may seem to suit IoT and IIoT applications well, but it’s not perfect. Though it is flexible, it’s more oriented toward UI and front-end development. React is not a standalone solution. It can only boost performance to a limited degree. This means to achieve great results, React has to depend on other libraries.

React is not a mainstream solution for IoT development

ReactJS is not commonly used for IoT yet. Because of that, developing an Internet of Things application with React is like sailing through uncharted waters. Although there are some libraries to facilitate integration like this one, it’s hard. Instead of taking a convenient library, your developers have to come up with their own solutions, and that is difficult and time-consuming.

Wrapping up

Thanks to React’s compositional structure, separation of concerns and lifecycle methods, this JavaScript library does bring some benefits for IoT projects:

  • Better code readability. Since React is component-based, it is easy to read and understand the code.
  • Faster development. It’s easy to modify the React code because you can reuse and combine components and reuse the same component on multiple occasions saving time.
  • Increased sustainability. React’s components are independent bits of code making it super easy to track problems and debug.
  • Real world updates. Thanks to the way React components render, its easy to update them.

This makes React suitable for small IoT projects. But developing complex multi-layered industrial IoT applications with React may be a problem. Basically, it’s risky and hard because the library is not popular for IoT technologies. ReactJS is more suited for front-end development with a focus on UI, meaning it can’t be used on its own. Fingers crossed, ReactJS can overcome the drawbacks when more developers contribute to the library’s creation. For now, with all its weak points, ReactJS alone is just not enough for complex IoT projects.

This article was originally published on IoT for All.