DiatomEnterprises is a company providing Software Development Services using React Framework.
The Article below explains the question about the migration to React v16.
In September 2017, Facebook announced the release of React v16.0, and soon, in November 2017, React v16.2.0 has been released. So, what is new in v16, what has been changed and why should you upgrade?
Let’s dive in and find out!
NEW CORE ARCHITECTURE: FIBER
If we start to look at what’s new in v16, the first thing we should talk about is Fiber. In short, Facebook’s engineers completely rewrote the internals of React. Why would they do that? Won’t that break all backwards compatibility?
Using Fiber, React is now capable of implementing new features like error boundaries and fragments, which we will cover later. We can expect additional new features as React develops further.
Another big feature that Fiber will unlock in React is async rendering. This will allow React to yield execution to the browser, allowing cooperative schedule rendering. By using this approach, React will avoid blocking the main thread, which will allow apps to be more responsive. This feature has not yet been enabled, but it is coming soon!
Even though there are huge changes to the internals of React, the API has not been changed; if your app worked in v15.6, then it should also work in v16, making the update to the newer version a breeze.
MIT LICENSE
Previously, React was published under a BSD + Patents license, which was a barrier for some. As there was a big uproar in the open source community and some companies even started to remove React from their projects, Facebook announced that they would relicense it under the MIT license.
React v16 is now available under the MIT license, and Facebook has also published the previous v15.6.2 under this license, to give time for those who can’t upgrade immediately.
Having projects like React under the MIT license not only helps the open source community, as anyone can use it freely without worrying, but the company itself also benefits a lot from sharing their React code and Services.
SPEED AND PERFORMANCE
While we wait for async rendering to be added in an upcoming release, there are already updates in v16 that boost the speed and performance of React.
Taking into account all the changes and new features, v16 is actually smaller in size than its predecessor.
- React is 5.3 kb (2.2 kb gzipped), down from 20.7 kb (6.9 kb gzipped).
- React-dom is 103.7 kb (32.6 kb gzipped), down from 141 kb (42.9 kb gzipped).
- React + React-dom is 109 kb (34.8 kb gzipped), down from 161.7 kb (49.8 kb gzipped).
Because of changes to how React is packaged, the new version has a smaller size and boosted performance.
React v16 also comes with a rewritten server renderer that now supports streaming. Here is a great article about the improvements to server-side rendering (SSR). Looking at synthetic benchmarks, the new SSR is about three (!!!) times faster than previous versions, but it should be noted that those benchmarks may vary in real-world applications.
NEW FEATURES
Now that we have all of that information out of the way, let’s dive into some examples of the new features! You can follow the code examples here, but there is also a GitHub repository with instructions, where you can download the code and see it in action.
ERROR HANDLING
Before v16, if an error happened in your application, it could corrupt the state of the application, which would then throw errors and break. React didn’t have a way to recover or handle such errors.
With v16, React now provides error boundaries. You can create a component to catch JavaScript errors, log/handle them and display a user interface for fallback. This can be done with a new lifecycle method – componentDidCatch(error, info):
View code here: https://gist.github.com/KBirzins/d40cb14a2e9b767056e302d7dd9cfc38
In the example above, we create a new component that implements the method componentDidCatch(). When we catch an error, we can log it, update the state and in the render() method display a fallback UI. We can create multiple components like this for different situations, or just create a universal one and wrap our whole application with it. It is used like any other regular component in React.
View code here: https://gist.github.com/KBirzins/6dfbf55cd88265f996555bc4becdbbf9
Check the code in the repository to see the error boundaries in action, with different implementations and examples.
PORTALS
Usually, in React, the element that is returned from the render is mounted as a child to its parent node in the DOM, but portals give us the option to insert the child somewhere else.
Using this approach, it is now easy to create things like modals, tooltips and hovercards, without using additional third-party packages. Check out this simple implementation of a modal:
View code here: https://gist.github.com/KBirzins/8d81f4c0d32d26dc7a8d8937c976af08
Now that we have created a component that creates a portal and targets a different location in the DOM, we can use this component inside of others.
View code here:https://gist.github.com/KBirzins/f0a4fb434aa0e4bd8b62023f4a7cc132
In the code above, we reuse our created ModalComponent in a different component. This component, in turn, depends on the state we call the ModalComponent, which then mounts in the DOM in a different div. For the full code, implementation and examples, check the repository.
FRAGMENTS
With the release of v16, you can now use the render() method to return an array of elements or even strings. Before, you always had to have a single parent element returned, but with these changes, developers have more freedom with how they structure their code.
View code here: https://gist.github.com/KBirzins/2663e2b25087e480f19b0317312ebbec
In version v16.2.0, there are now fragments that support the option to return multiple children from a render() more easily.
View code here: https://gist.github.com/KBirzins/68ab899eb51e485dd6f569fc832471e3
Fragments might be more easily understood because they don’t have to be separated by commas as in arrays; you don’t have to have keys, and strings don’t need to be wrapped in quotes.
Conclusion
So should you migrate to React v16? Definitely! With all the changes – the rewrite of the core with Fiber, updates to the license, boosted performance and smaller file sizes – it makes sense to migrate to the newest version of React. We, as a software Development company with the React Services definetey advise you to do that.
If your current application runs using React v15.6 without any warnings, then upgrading to v16 should be easy. Since v16 is still rather new, if you have a large codebase with a lot of third-party dependencies, you might run into some issues. Otherwise, the React API has not changed with the rewrite. Here is an excellent article about migrating a large codebase.
React is becoming more popular every day. With Facebook constantly working on it and the huge ecosystem behind it, it is a great choice for your upcoming projects, and Diatom Enterprises is ready to help you!