November 2022 Frontend Updates: Turbopack, The Upcoming useEvent React Hook and Animated CSS Grid Layouts

This month’s updates:

• Turbopack: The Webpack Successor
• The Upcoming useEvent React Hook
• Animated CSS Grid Layouts

Turbopack: The Webpack Successor

Webpack, the gold standard for frontend bundling, is mature and stable, but desperately slow for large projects and configuration can be cumbersome. Last couple of years we have seen a lot of alternatives emerge, and we actually started the year speaking about Vite and the next generation frontend tooling.

Turbopack is the last one to join the club, and a really promising one. It has been written in Rust and created by Tobias Koppers, the creator of Webpack. Iit claims to be many times faster than anything else, even when compared to the already blazing fast Vite.

Although there has been some controversy around the performance figures, it’s a step forward and certainly faster than the rest. Unlike Vite, which uses ESM modules locally and only bundles for production, Turbopack always bundles your dependencies, which makes it much easier to integrate with your setup.

It’s an Alpha release, so still not ready to use in production, but it looks promising and it’s worth keeping an eye on. Take a look at this resources to know more:

• Turbopack release blog post
• Turbopack documentation

The Upcoming useEvent React Hook

Optimizing for as few as possible re-renders with React.memo or to avoid unnecesary re-fires of the useEffect hook can be tricky.

Reading state or props in event handlers breaks optimizations, because those handlers will be recreated every time the component re-renders. The common way to handle this would be to memoize those functions with useCallback, but event handlers usually need the latest state values, and if they change frequently, like on every keystroke, you could end up with the same thing in practice.

Here is where the new proposal (an RFC in the React Github project) comes to rescue. With this proposed useEvent hook, you’d be able to access the fresh state values while preserving referential equality between renders:

// 🟡 Always a different function
constonClick= () => {
    sendMessage(text);
  };

 // 🟡 A different function whenever ‘text’ changes
constonClick=useCallback(() => {
    sendMessage(text);
  }, [text]);

 // ✅ Always the same function (even if ‘text’ changes)
constonClick=useEvent(() => {
    sendMessage(text);
  });

This would still have some limitations: As the name suggests, it’s only for events, which means that functions wrapped into useEvent cannot be used during render or they would throw an error. But effects re-firing on data change where it doesn’t make sense would benefit a lot from this new hook; the idiomatic solution will often be to extract an event from it. Although not everything inside useEffect is always an event!

For more details, check the RFC in the React repository. It has every use case well defined, with do’s and don’ts and examples. It’s just an RFC with no implementation plan yet, but it’s an interesting thing to keep an eye on. Do you think it would be a useful tool to have? We’d like to read your opinion in the comments!

Animated CSS Grid Layouts

Since version 107, Chrome is able to interpolate grid-template-columns and grid-template-rows!

Interpolation is what browsers’ rendering engines do to make declarative CSS transitions and animations work. They enable smooth transitions between origin and destination values by guessing every intermediate value.

This means that now you can use these CSS grid values in your transitions and animations in Chrome! Bramus has put up this nice CodePen example, don’t miss the full article!

Anything you’d like to add? Think there is something missing? Ping us on @whitespectrehq, Instagram or LinkedIn, we’d love to read your feedback!