Published on 10.1.2020
React has rapidly evolved in recent years, and 2020 is shaping up to be another exciting year for developers using this popular JavaScript library. With React 16.x behind us, we now look ahead to what’s coming next. In this post, we’ll go over some of the most significant changes that came with React 16.x and give you a sneak peek at what to expect from React 17, Concurrent Mode, and Suspense.
React 16.x Recap: Key Features
Before diving into 2020, let’s quickly revisit some of the standout features that were introduced with React 16.x over the past couple of years:
- Error Boundaries:
One of the most important changes was the introduction of Error Boundaries in React 16. This allowed developers to gracefully handle errors in the UI without crashing the entire app. Error boundaries allow components to catch JavaScript errors and display fallback UI. - Fragments:
React Fragments were introduced to allow multiple children to be returned from a component without adding extra nodes to the DOM. This has helped reduce unnecessary HTML elements and makes the code more readable and efficient. - Portals:
React Portals let developers render children into a DOM node outside of their parent component’s hierarchy. This is especially useful for modals, tooltips, and other elements that need to visually break out of their containers while maintaining their logical hierarchy. - React Fiber:
React’s reimplementation of the core algorithm (React Fiber) aimed at improving performance, particularly for complex and heavy applications. This gave rise to features like async rendering (Concurrent Mode, though it was not fully released yet). - Hooks (React 16.8):
With React 16.8, Hooks were introduced, marking a major shift in how state and side effects were handled in React.useState,useEffect,useContext, and others brought functional components to the forefront, simplifying code and improving readability.
React 17: A Steady Upgrade
Looking forward to React 17 (expected in 2020), the release is all about stability and improving developer experience rather than introducing major new features. Some of the key goals of React 17 include:
- No New Features:
The React team decided that React 17 will be a stepping stone to future releases. As a result, there won’t be any major breaking changes or new features. This approach aims to allow developers to adopt React 17 without worrying about significant code rewrites. It’s a “forward compatibility” release. - Gradual Upgrades:
React 17 introduces a new JSX Transform, which removes the need for explicitly importing React in every file that uses JSX. This will be a great convenience, and the new JSX transform will also be more efficient. - Improved Error Handling:
React 17 brings enhancements to error boundaries and error handling to help catch more errors during rendering. This improves the developer experience by giving more context on where the error is happening. - React DOM Improvements:
The React team has made improvements to React DOM that will make it easier to update React and stay up to date with future releases. Expect performance boosts, bug fixes, and smoother interactions in the DOM layer.
Concurrent Mode and Suspense: The Future of React
While Concurrent Mode and Suspense were available experimentally in React 16.x, they’re expected to be a big part of the future direction of React. In 2020, we expect these features to be closer to full production readiness.
What is Concurrent Mode?
Concurrent Mode is a new experimental feature that allows React to work on multiple tasks simultaneously. With Concurrent Mode, React can pause rendering to work on something more important, then come back to finish the task when needed. This results in better user experience because React can respond to interactions more quickly without being blocked by expensive rendering operations.
For example:
- React can render the UI in the background while the user is interacting with the app.
- If there is a heavy process running, React can pause it and return to user input without delay.
- Prioritizing work based on user interactions ensures the UI stays responsive.
While Concurrent Mode is not yet a default feature, React 17 could be the first step in making it fully usable for production apps in the near future.
What is Suspense?
Suspense is a feature that helps handle asynchronous data fetching and code-splitting more effectively. It works alongside Concurrent Mode to ensure smooth UI transitions when loading data or components.
- Data Fetching: Suspense lets React “suspend” rendering until the necessary data is ready. This avoids having to display a loading spinner manually and ensures that the UI is clean and polished.
- Code-Splitting: Suspense works great with React.lazy(), which allows for lazy loading of components. You can wrap React.lazy components inside Suspense to show a loading state until the component is ready to render.
For example:
import React, { Suspense } from 'react';
const MyComponent = React.lazy(() => import('./MyComponent'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<MyComponent />
</Suspense>
);
}
Suspense and Concurrent Mode working together will enable smoother transitions and better user experiences, especially when dealing with large applications and data-heavy operations.
What’s Next for React?
While React in 2020 is focused on stability and performance, there are still exciting features coming down the road. Expect to see:
- Improved Server-Side Rendering (SSR):
React has continued to improve SSR, and with React 18 (planned for 2021), expect even faster server rendering and improved hydration (making the initial server-rendered page interactive). - React Server Components:
A big new feature being developed is React Server Components, which allows you to render components on the server and send the HTML directly to the client. This can improve performance by reducing JavaScript bundle sizes. - Better TypeScript Integration:
TypeScript support has been a big focus for React. In 2020, you can expect even better type-checking and type-inference to help with developer productivity. - Improved DevTools:
React DevTools will continue to evolve, providing more insights into how your app is performing and how components are re-rendering. Expect new features like React Concurrent Mode debugging support and performance profiling improvements.
Conclusion: React in 2020 and Beyond
React is heading into 2020 with a focus on stability, performance, and usability. With React 17, we can expect smoother upgrades, fewer breaking changes, and better error handling. But the real excitement lies in Concurrent Mode and Suspense, which will redefine how we build and render applications. As these features move toward production, they will unlock new possibilities for building faster, more interactive UIs.
The React ecosystem continues to evolve rapidly, and 2020 is set to be an exciting year for developers who are ready to explore these powerful new features.
Happy coding, and let’s look forward to what React has in store for the future!
