Suddenly, everybody seems to be talking about React. In Stack Overflow’s latest annual developer survey—the largest such survey on earth—React didn’t just win the “trending tech” section, it wasn’t even close. React was up 311%, double the year-on-year growth of its nearest competitor.
So, what is React, and why are people so excited about it?
Facebook created React. Why do they use it? According to the React website, they created it “to solve one problem: building large applications with data that changes over time.”
That’s interesting, it tells us that React is designed to handle large sites. And the fact that it’s being used by some of the biggest names out there, like Instagram and Uber and Expedia, tells us it can play in the big leagues. But it still doesn’t tell us why we should choose it over all the other frameworks. So what is it that has the community so excited about React?
For me, the heart of React—the reason why I find it a joy to write, and one of the most productive frameworks I’ve ever used—is a very simple idea: unidirectional data flow. React components don’t update the DOM. All they do is render their output based on the current state of the data. That’s it. As a React programmer, you don’t update the DOM at all. Ever. There’s no complex logic responding to data changes and modifying the DOM. You just render the output based on the current data.
And that’s wonderful. It’s like the early days of the web, when you never had to worry about anything complex happening on the client, because every change meant a full request-response cycle, and a new page being sent back to the client. Life was so much simpler then. Well now that simplicity is back but without the server round-trip.
Of course, the complexity is all still there underneath, otherwise you couldn’t do all of the cool stuff that makes your SPA modern and functional. But the beauty of React is that the complexity is managed for you by the engine itself. Your component re-renders a virtual DOM any time anything changes. React uses a diffing algorithm and executes the minimum necessary DOM updates to bring the two back in sync. And those updates are fast, very fast.
React is flexible, fast, and a joy to develop. So how do you go about writing a React component? Well, that’s a story for another day.