---
title: "November 2022 Frontend Updates: Turbopack, The Upcoming useEvent React Hook and Animated CSS Grid Layouts"
slug: november-2022-frontend-updates
url: /ideas/november-2022-frontend-updates/
subtitle: This month we cover the release of Turbopack, the new frontend bundling tool, the upcoming useEvent React hook and animated CSS grid layouts in Chrome.
publishDate: 2022-11-29
image: /images/builder/246134aeefea4910b8a7f506c7022748.jpg
authorName: The Whitespectre Engineering Team
authorImage: /images/builder/0021b06f92f340129c2faf7760b194b1.png
---

This month’s updates:

*   [Turbopack: The Webpack Successor](#turbopack-the-webpack-successor)
*   [The Upcoming useEvent React Hook](#the-upcoming-useevent-react-hook)
*   [Animated CSS Grid Layouts](#animated-css-grid-layouts)

#### Turbopack: The Webpack Successor

[Webpack](https://webpack.js.org), 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](https://medium.com/whitespectre/january-2022-frontend-updates-ad10e4fb0e2d).

Turbopack is the last one to join the club, and a really promising one. It has been written in [Rust](https://www.rust-lang.org) and created by [Tobias Koppers](https://twitter.com/wsokra), the creator of Webpack. Iit claims to be many times faster than anything else, even when compared to the already blazing fast [Vite](https://vitejs.dev).

Although there has been [some controversy around the performance figures](https://github.com/yyx990803/vite-vs-next-turbo-hmr/discussions/8), 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](https://turbo.build/pack/docs/why-turbopack#bundling-vs-native-esm), 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](https://vercel.com/blog/turbopack)
*   [Turbopack documentation](https://turbo.build/pack/docs)

#### 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](https://en.wikipedia.org/wiki/Request_for_Comments) in the [React Github project](https://github.com/reactjs)) comes to rescue. With this proposed `useEvent` hook, you’d be able to access the fresh state values while preserving referential equality between renders:

```javascript
// 🟡 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](https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md). 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](https://twitter.com/bramus) has put up this nice CodePen example, [don’t miss the full article](https://web.dev/css-animated-grid-layouts)!

See the Pen <a href="https://codepen.io/web-dot-dev/pen/XWqVowx"> Animated CSS Grid</a> by web.dev (<a href="https://codepen.io/web-dot-dev">@web-dot-dev</a>) on <a href="https://codepen.io">CodePen</a>.  
  

* * *

Anything you’d like to add? Think there is something missing? Ping us on [@whitespectrehq](https://twitter.com/whitespectrehq), [Instagram](https://www.instagram.com/whitespectrehq) or [LinkedIn](https://www.linkedin.com/company/whitespectre), we’d love to read your feedback!