Why "React"?

Why is React called “React”? Why was it introduced? What is the problem it solved? Let’s explore answers to these questions in this article.

Why is it named “React”?

As you might guess from the name, React is responsible for “reacting” to the changes on the User Interface (UI). It is “reactive”. Whenever a user performs an action on the UI, it requires changes to be made in the browser DOM tree (the tree structure of elements that are visible in the UI).

React takes care of making these changes. Also, React has its own DOM called the Virtual DOM (to be explained in a separate article). Basically, this Virtual DOM exists for a simple reason: it makes it easy for React to compare this DOM with the browser DOM to make only the new changes in the browser DOM, instead of pasting the whole DOM as it is.

Why was React introduced?

React was created to make building user interfaces easier. But there’s a problem that it actually solved, as per the react community.

Facebook used to have a glitch in their messaging service a long time ago, which is often referred to as the “Ghost Message Problem” or “Phantom Message Problem”.

So, the problem is that, when a user has unread messages, even after the user reads those messages, the unread messages count number on the messenger icon wasn’t disappearing/changing. The user would then have to perform hacks like deleting the conversation, etc., to solve this problem. This used to be an irritating problem for the users, and a lot of them have started reporting it.

That’s when Dan Abramov, one of the core engineers at Facebook, took up this as a challenge and solved this problem by introducing React and specifically the concept of state in React.

What is “State” in React?

As you might have guessed again, State in React is responsible for remembering and monitoring the current state of a React application. State is a hook provided by React (we will discuss hooks in another article). Speaking on a very high level, State is a combination of a data bucket and a function that helps us with updating this data. Whenever this data is changed or updated (due to an external action performed by the user), React quickly takes charge and goes ahead to update all the places where this state data is being used.

For example, let’s say your state has data, which is the number 3 (unread messages count). Now, suppose the user performed an action (reading one message); you can update this number to 2 using the function that the state hook provided. As and when it is updated, React gets an update about this change, and it will update every place where the number was previously 3 to 2.

Conclusion

Through such awesome features like state, etc., React makes the life of a frontend developer a lot simpler. It has many more amazing features like Reconciliation, Diffing Algorithm, React Fiber, Virtual DOM and a lot more which we will be discussing in upcoming articles. So, follow for more surprises!

If you want to learn more about React, visit React Official Website