Return to React Europe

First day: hooks, hooks and more hooks!

I expected it and I was not mistaken, the big new feature of React 16.8 was omnipresent during this first day. Having the chance to work for a client at the forefront of the use of React, I had the opportunity, from the official release of React 16.8, to use hooks and measure the importance of this small revolution in the React world.

The articles dealing with hooks are flooding the web, I will not do yet another presentation of them here and invite you to refer to the official React documentation https://reactjs.org/docs/hooks-intro.html and at this talk https://www.youtube.com/watch?v=dpw9EHDh2bM to better understand the motivations behind this little “revolution” and better understand how they will simplify the lives of React developers by helping them write cleaner and maintainable code.

The first morning of React Europe was therefore more of a reminder and a good way to rediscover React, its philosophy, its origins and to learn more about its future evolution. Having had the opportunity to work with other Front frameworks such as AngularJS or Vue, I consider that React is always one step ahead and that its minimalism and power definitely make it my favorite framework!

A very informative day!

There are around ten hooks but it is clear that among these, some were not familiar to me because they were suitable for a very specific use. Even after rereading the documentation several times, I had difficulty understanding in which cases I would use them. As such, this first day was very instructive. I was able to review and expand my knowledge of hooks and had the opportunity to practice using a few hooks that I had never used.

This was for example the case of the obscure useImperativeHandle. I was thus able to better understand its usefulness and I have since had the opportunity to use it in a “real” case more easily. Even if I admit that I didn't see any big discoveries made during this first day, it was an opportunity for me to review and consolidate my understanding of hooks and their use. Because even if hooks seem a priori simpler than the use of stateful components in the form of a class, mastering them requires a certain change of habit and way of thinking that it is good to compare with those of other developers. I also really appreciated certain asides from the workshop dealing with additional bookstores such as styled-component.

Olivier Tassinari, the main contributor to the bookstore material-ui being one of the two leaders of the workshop. His feedback on the use of styled-components to build a library of graphic components was very interesting for me. In particular the subject of compound components. Because this corresponds exactly to my current mission where I also participate in the creation of such a bookstore with styled-component.

Second day at React Europe: Fashion Competitor, Suspense and Lazy Loading!

The second day of this workshop was devoted to other new features of React. They should considerably boost performance and make the display of a React application more fluid.

Fashion competitor

The future fashion competitor will allow React to manage the priorities of component renderings and for example to interrupt a long rendering to make that of another component more priority.

The user experience will then be improved for the end user who will be able, for example, to interact with an input field or a component whose state changes when hovering over the mouse, avoiding latencies due to other more expensive renderings in the rest of the page (a long list for example). This new feature, still considered unstable at present, happens “under the hood” of React. It should not impact the code of an existing application (there is, however, a way to adjust rendering priorities “by hand”). I admit that I don't fully understand how this asynchronous rendering mode works technically because it's a specialized subject, but I intend to follow its development closely and I'm impatiently waiting to see it in action!

Suspense

Lazy loader

Other new features allowing a more responsive display of a React application are React.lazy which together with Suspense will lazy-loader (load on demand) a component and for example display a loader while it is loading. Suspense allows, as its name suggests, to suspend the display of a component as long as it is waiting for the network.

This works thanks to the API of Promises, well known to JavaScript developers, making its implementation relatively easy. Two use cases then arise. The case where the code of a component is in a file other than the one which is being rendered and which depends on it. We then talk about code-splitting as well as lazy-load. We do not wait for the dependency code of a component to be loaded before starting its rendering. The syntax for these on-demand loads with React.lazy is based on the future JavaScript standard for dynamic imports.

Data fetching

The other case is when a component is waiting for data from an asynchronous request. We then talk about data-fetching. It should be noted that these cases could until now be perfectly managed by using in particular the methods of the rendering cycle of a component (for the data-fetching) or using third-party libraries like react-loadable for the code-splitting. But the integration, in React, of APIs allowing these cases to be managed natively brings much more clarity, standard and consistency to the code of an application. I particularly appreciated being able to touch Suspense and Lazy in a concrete way because I had not been able to experiment with them until now... Because there is a BUT which has prevented me until now from using this in my daily work.

At present, Suspense is not compatible with the Server Side Rendering (crucial in my current mission for site SEO and display performance). Greg Bergé (workshop supervisor and also main contributor to loadable-components) discussed a way to make Suspense compatible with SSR. In fact, there is a bookseller react-ssr-prepass which seems to compensate for this shortcoming. Unfortunately the library is very recent, not very efficient and is still a bit of an experiment... It seems that it is more prudent to wait for the React contributors to resolve this problem themselves.

Conclusion on these two days at React Europe

These two days of workshop were an excellent opportunity for me to rediscover all the latest developments in React and to put into practice those that I only knew in theory. This was a great exercise because React and its ecosystem are evolving quickly. It is always very interesting and beneficial to be able to take a break from your daily work where you often have your head in the handlebars to revisit the basics of your knowledge and compare your experience with that of seasoned developers. As such, I was reinforced in my knowledge of React and ever more motivated to continue using this library which is always evolving in the right direction!