Data binding in ReactJS

We won’t be overloading with terms and explanations of what ReactJS is. You can always google it. But for those who have just started their path in web development and non-tech specialists, it won’t be superfluous to disclose it shortly.

ReactJS is an open-source JavaScript library for creating great UIs. It is widely used for developing SPAs and mobile apps as well. Moreover, together with such great technologies as Redux, GraphQL, and MobX it allows the creation of robust apps and at the same time provides high development speed, simplicity, and scalability.

Data-binding is one of the most important processes that every React developer has to understand and learn how to use it. So, what is it? 

Data-binding is the process of connecting an app’s UI with its business logic. For example, if all the notifications and settings were done correctly, then the data will display all the changes made. That means, when you change something in an app’s UI, the data that is beneath that will immediately reflect them. This is one of the core processes because it reduces the time of development, and the amount of plate code and simplifies the alteration of UI in an app.

Using it, you can ensure that every element will work according to the specified logic and in the way you want. 

The binding method, data model, and user interface can all take many shapes, but the end goal is always to connect the user interface to a model. One-time, one-way, and two-way data binding are the three main types that any developer will face sooner or later. Different frameworks use different types of data binding, but when we are talking about ReactJS, here one-way data binding is used mostly.

As we have mentioned before, ReactJS supports one-way data binding mostly, but it should be noted that two-way data binding can be also realized in ReactJS. We will focus on one-way data binding, as it is more frequently used in React while creating apps and other digital products.

When we talk about one-way data binding in ReactJS, we have to turn our attention to the unidirectional data flow. Unidirectional data flow is the only way for the data to be transferred to other parts of an app. In React, it is revealed as the state that is handled by child components and the view that triggers actions to update the state.

In addition to all of that, it is important to mention that there are two models of one-way data binding: 

• Component to View
• View to Component

In the first model, all the changes in the component data will be immediately reflected in the UI of an app. E.g. if we have a list: 

let list = [1, 2, 3, 4, 5];

and we will remove or add some elements, this will be immediately reflected in the UI.

View to Component model works vice versa. In that way, any changes made in UI will affect and change the component. For example, if you delete or add some element in our list in the UI, the component will do the same thing.

Let us consider a small example. Look at this input field: 

In this illustration, if we go to the view and type something, we won’t see it being typed in the input box. The reason for this is that the input field does not have an event handler connected, and without one, the state of the input field cannot be altered.

Here, when we type something in the input box, the value will be changing. Why is it so? 

Because this time, we have an event handler attached, and it starts the change of a state that is accountable for the re-rendering when we type something and change the value. This phenomenon is called a controlled component because React handles the data here. In that way, each time when someone updates the state, React will re-render and change the visible value in our input box.

Now you understand that data binding in ReactJS is a crucial and important process for any app that you develop. Every developer has to get acquainted with this topic very well and practice it to get experience in this question. Dive deeper, learn documentation, and experiment. Be sure, that if you do that, you will level up yourself as a developer and be able to create cooler things.

We hope that that information was helpful, and now you have some basic knowledge and clue on how you can apply data binding in your projects.