Introduction:
As the years roll on, the tech development environment is becoming tougher; and not only for the Frontend developers! We currently live in a time where technology is rapidly changing with new developments seemingly being brought out every week. Who would have thought that we may actually live to see the Matrix becoming reality?! Or to experience times where artificial intelligence is not science fiction anymore, and to realistically find that Jonathan Nolan’s vision in the Person of Interest series will soon be well within reach.
At this point, I would like to point out that as a Frontend Developer, I am extremely curious to discover the future direction of software development. Regarding the title, does React have a worthy opponent? Well, did the Facebook team do such a great job unifying the majority of frontend developers? Why does it have to be React? What about other available tools? These are the questions that we continuously have to ask in the frontend world.
The new React 18 has been long awaited but it doesn’t look like Facebook will be releasing it anytime soon. In the meantime, their most recent version is only in alpha so a lot of things could be subject to change. We should presume that we need to wait at least a couple of months until the release will be fully documented and available for production.
For the first time, the team responsible for React have implemented the concept of a working group. Those chosen must provide feedback which will be used to help prepare the upcoming version of React. The participants in this development stage are chosen but the discussion is in public and can be followed at GitHub Discussions. A lot of topics can be found there such as new features, research prepared by the main team and much, much more – it’s truly a gold mine for developers. What makes it successful is that it’s the first time that kind of approach has been used where it actively involves the community in the process. I must admit, I am extremely interested in the final result.
The update:
The thing I most like in the new versions of React is that there aren’t any groundbreaking changes so if we want to upgrade to React 18, it can be done in a single afternoon and can be with minimal changes to our application code (or possibly even none!). Have a look at one of React’s official blog posts to read more about this. In my opinion, it is really important to prepare changes that require minimal effort to upgrade. This helps to avoid problems such as those that Angular had which made it very difficult to upgrade from version 1 to 2.
So, what exactly will this new version bring? Unlike the prior releases, React 18 looks to be delivered with a whole host of new features, such as performance improvements, which may not be visible at a first glance. Things like automatic batching, new startTransition API and the long awaited Suspense feature. These will all be available thanks to a new opt-in mechanism on the first day of the new React 18 release called concurrent rendering. This allows React to prepare multiple versions of the UI at the same time.
Moreover, with React 18 we have got a new Root API which is a feature that every one of us is used to seeing. We’re just rendering our main app component into our root element on the page – simple, right? The previous one will be deprecated and will be called “Legacy Root API”.
It was like this:
A new Root API looks like this:
You may notice now how the root of our React app is just separated. We have to first create the root through the createRoot function, then call the render method on it. This not only adds some reasonably new features but is also much clearer and notably easier to update when it is required to do so.
As previously mentioned, the suspense will finally be over in the upcoming release and we are going to get full support for it. It differs from the previous versions as it includes some big architectural changes under the hood. React’s team added basic support for Suspense in React 16.x, but as we know, it wasn’t fully supported and doesn’t do all the things that were presented in the demos. It is a part of SSR Improvements. But you may ask, what is the famous Suspense? As the name itself implies, it just suspends something until it’s ready to be rendered. For example, below we have a component that needs some time to fetch data before it’s ready to be rendered.
The suspense will just use the fallback until the data is fetched and components are rendered. What is important here to note is that AnotherComponent is not waiting for data, but it is still going to be suspended until everything is ready to be rendered which is extremely helpful with Server Side Rendering.
In that case, does React have worthy opponents? For good reason, the tool is becoming even more popular nowadays. It is being used by 10 million users per week on average and without a doubt, this number will grow exponentially. There are tremendous possibilities as the massive communities created by countless amounts of people are making React one of the most popular libraries in 2021 for creating user interfaces. So far, we still don’t know what is yet to come but it promises to be one hell of a rodeo.
Do you want to know more:
