React Conf recap: Hooks, Suspense, and Concurrent Rendering

Tom Occhino

This year’s React Conf took place on October 25 and 26 in Henderson, Nevada, where more than 600 attendees gathered to discuss the latest in UI engineering. Sophie Alpert and Dan Abramov kick…

Overview

The article recaps the React Conf held on October 25 and 26, 2018, in Henderson, Nevada, where over 600 attendees engaged in discussions about the latest advancements in UI engineering. Key topics included the introduction of Hooks, Concurrent Rendering, and React Native's new architecture, promising significant improvements in performance and usability.

What You'll Learn

1

How to use Hooks to simplify React component code

2

Why Concurrent Rendering can enhance app performance

3

How to implement code splitting with React.lazy

4

When to utilize React's new profiler tooling

5

How to leverage React Native’s new architecture for better interoperability

Key Questions Answered

What are Hooks and how do they simplify React development?

Hooks are a new feature in React that allow developers to use state and other React features without writing a class. This simplifies the component code, making it easier to read and maintain. Hooks were introduced in the React 16.7 alpha release.

What is Concurrent Rendering and how does it improve performance?

Concurrent Rendering is a feature in React that allows rendering to be interrupted and resumed later, improving the responsiveness of applications. It enables smoother user experiences by prioritizing updates and reducing blocking.

How does the React.lazy API facilitate code splitting?

The React.lazy API allows developers to dynamically import components, enabling code splitting in React applications. This means that parts of the application can be loaded on demand, reducing initial load times and improving performance.

What is the purpose of React's new profiler tooling?

React's new profiler tooling helps developers identify performance bottlenecks in their applications. By analyzing component render times, developers can optimize their code to ensure faster and more efficient applications.

Technologies & Tools

Some links below are affiliate links. We may earn a commission if you make a purchase.

Frontend

React

Used for building user interfaces and managing component state.

Frontend

React Native

Used for building mobile applications with a focus on performance and interoperability.

Key Actionable Insights

1
Implementing Hooks can drastically reduce the complexity of your React components, making your codebase cleaner and easier to manage.
By using Hooks, developers can avoid the boilerplate associated with class components, leading to more maintainable code and quicker development cycles.

2
Utilizing Concurrent Rendering can significantly enhance user experience by allowing your app to remain responsive during heavy rendering tasks.
This feature is particularly useful in applications with complex UIs where performance is critical, ensuring that users do not experience lag or unresponsiveness.

3
Adopting the React.lazy API for code splitting can improve your app's load time and performance by only loading components as needed.
This is especially beneficial for larger applications, where reducing the initial bundle size can lead to faster load times and better user engagement.