React yesterday and today- more powerful than ever

From a simple library to production-ready development environment.

When React.js was announced on 1st march 2013, six years ago, it was just a simple library . But not today. It’s no longer only UI library, today it’s powerful development solution that powers thousands of web pages you’re using everyday. And it’s popularity increases every day. But what you can do with it - in 2019?

1. JSX - a big step for web

JSX was (and is!) a big step for developing web applications. Instead of writing your whole code in HTML, you can kind of compose an HTML markup into your component. And this gives you a lot of other abilities. But why is it useful? In standard HTML, if you want to create a loop & perform a conditional statement, you need to call DOM and add your code via innerHTML method. And this can cause errors and issues very hard to detect. On the other side - imagine your code needs to be reactive, for example, each time user clicks the button, page should display click count increased by 1. Normally you would just call that HTML Element and increase it’s text by 1. But wait! To increase value by 1, you need to have it at all. And to do that, you can for example create a temporary variable. But what about working with dozens of them? What if you have a lot of subsites on your page? We can even go further, but that’s not really the key of problem. We need a better way to write our code and maintain it. And this is where JSX and React comes in. It can solve each of this problems. Creating loops & performing conditionals? Handling errors and issues? Reactivity? JSX solves each of them. But React comes with other features as well…

2. State management & props

Managing state isn’t that simple. While we can theoretically think of state as a normal JavaScript function, it isn’t it. We need to think of it rather as a function, not an object. This is because state needs to be immutable (more on why here). This is why we need to call the function to clone it first and then set it as our main state object. And we can implement it to the JavaScript, but why? We have it in React and it works with JSX out of the box, updates and manages itself only when it needs to. So for example if you need to update the button’s count value, state is a right thing to work with it. The same with props. It enables us to “pass” some “default values” to the component (typically informations that never changes). And React obviously implements it perfectly, so you don’t need to set a constant title on your page anymore. But getting back to the intro, what about managing state in dozens of components? Yes, React also has some solution for that, but we will talk about it later.

3. Context API & Hooks & Future

Now i want to talk a bit more about the React’s future.
With React 16.8, we have an ability to write more stateless components. What do i mean by “more stateless” is that you can separate your logic from your “view” (just plain JSX) code. And also Hooks backs us to writing our components as a functions, not as a classes. Why? According to official React site:

Classes confuse both people and machines

And that’s it. More here.
Now, let’s talk about Context API. It’s a built in state manager, that we can start using from today, similarly to Higher Order Components. And now i want to make an adnotation:

We can think that Context API is similar to Redux. Yes, it is. But it doesn’t mean that you should stop using Redux. Context API is fine for most cases, but when it comes to making your app with true global state management, it could be difficult. But can be done. Anyways, Redux provides a lot of other solutions that can be used with React, which Context API doesn’t provide you (for example Time Travel Debugging). It’s just all about your needs. And you need to decide about it on your own. But each of this ones will be probably ok for most projects. You just need to choose the better solution that simply better fits your requirements.

While in my opinion Context API is easier to learn, Redux is more powerful. And that’s it.

When it comes to other things React’s team want to do is obviously make better integration with Hooks - add more functions to it. And when it comes to Facebook, primary maintainer of React, they want to start creating it’s future components with Hooks, but again - upcoming ones, not the current’s. They are fine (at least for now). And now we’re coming to final: backward compatibility. Hooks are 100% backward compatible, simply because classes known from ES6 are just a functions under the hood. And that’s it. That’s the future. For making React better for today, tomorrow and for the next years.

Thanks
Jakub