We say a
lot about...
everything

About the conference

The React Summit is one of the most popular conferences about React in Europe. This year, it was held in Amsterdam, the city of canals, quirky architecture, and great nightlife. The conference was hybrid, so you could attend it in person, remotely, or both. Even though the idea of listening to the talks from my cozy couch sounded tempting, I decided to attend the conference in person. That way it would have a bigger impact on my knowledge. And, of course, visiting Amsterdam is a big plus! :)
It wasn’t easy choosing between various workshops and talks because everything sounded very interesting. Finally, I decided to broaden my knowledge about React by attending the workshop “Advanced React”.

About the workshop

The workshop was led by Nik Graf, a React consultant and workshop instructor. The purpose of the workshop was to introduce the changes brought by the latest version of React, React 18, and it was divided into several parts.

Each part had its own topic, covering one of the updates that will be provided by the new version of React. Every part was divided into subparts: a short presentation, coding, and a retrospective talk. During the presentation, Nik demonstrated a new feature, talked about some of its basics, and showed us how to use it in the app. After that, we got a task that was closely related to the feature from the presentation. This was my favorite part because I had an opportunity to implement something new for the first time. The discussions were the most interesting part, of course. Sometimes they were really lively, but I believe that everyone had a great time. The only downside of the workshop was that it was perhaps a bit too long. It lasted nine hours, and even though we had coffee and lunch breaks, it was pretty hard to stay focused. Nevertheless, it was totally worth it! Here are a few cool things in React 18 I liked the most.

What’s new in React 18?

Batching

While React 17 supports batching for browser events and hooks, batching for all state updates will be enabled in React 18, no matter where they come from. This will be Automatic batching, which means that it will be a part of the default behavior of the app. But don’t worry, there is a way to avoid that if you really need to.

Concurrent Mode

React 18 distinguishes urgent and non-urgent updates. Urgent updates are the ones that demand direct interaction, like typing, clicking, etc. Non-urgent ones are transitions from one UI view to another. For example, take the ordinary search feature. It’s more important to show what a user types in an input field, rather than the search result. Now, we can take care of urgent updates through the Concurrent Mode, one of the most revolutionary updates in React 18. From now on, render is interruptible. That means that the browser doesn’t have to be blocked by React in order to show urgent updates to the user. React can start rendering, interrupt it to update the urgent changes and then continue rendering again. Also, the usage of debouncing and throttling in UI will be reduced a lot this way. Mind-blowing, I know!

Suspense on the server

We already know that server-side rendering consists of four steps: 1. fetching the app data, 2. rendering the app to an HTML file and sending it as a response, 3. rendering of the Javascript code, and finally, 4. hydration. The tricky thing here is that each step can’t start if the previous one is not finished. That’s a problem if one part of the app is much slower than the other. But, React 18, with the component , allows you to break the app into small parts which will be independent while going through these steps. As a result, the slowest part of the app won’t block the parts that are fast. This is a huge user experience improvement because users will be able to see the content sooner and start interacting with it much faster.

Conclusion

This workshop was a hit for me! I learned quite a lot and I can’t wait to start using all these awesome things while developing the app that I am currently working on. And about Amsterdam… Well, I think that I would need to write another blog in order to describe how beautiful and fun this city is. What I can tell you is that, you heard well, their pancakes are THE BEST!