How to Try React 18 in Gatsby

Ward Peeters
Ward Peeters
June 15th, 2021

It’s been a week since the React Team announced the alpha of React 18 and the working groups. Time flies! As curious people, we want to try it out and play with these new features in Gatsby.

🥳 Now you can! 🥳

In Gatsby 3.7 you can simply enable it by installing react@alpha and react-dom@alpha via yarn or npm, as seen below:

Gatsby will automatically detect React 18 and switch React.hydrate with the new React.createRoot API. Now you are ready to use these new features:

StartTransition
StartTransition marks specific updates as “transitions” in your application and will be halted when more urgent updates are queued. Think about a search bar on an e-commerce website. While you’re typing, you also want to filter the products in the list. The search input should update immediately, while the filtering can take a second longer.

Currently, in React 17 you’ll implement a debounce or setTimeout technique to delay updating your product list.

Automatic State Batching
When using multiple setState actions inside an async task (Promise, setTimeout, event handlers) React re-rendered each time. With Automatic Batching, these updates are batched together, resulting in fewer CPU cycles necessary to update your UI. In Gatsbyjs.com we saw a small reduction in time-to-interactive (TTI).

Remember, React 18 is still in its alpha phase. Check out our React 18 e-commerce example at https://react18ecommercedemo.gatsbyjs.io. The code lives on Github.

As always, we love your feedback in our Github Discussion, so we can relay it to the React team.

Stay Hydrated!
Ward Peeters, Technical Lead for Gatsby Open Source

Ward Peeters
Written by
Ward Peeters

Web Performance and Build Tool Specialist. Doesn’t suck at frontend or backend. Worked on Lighthouse and maintains Preact and more.

Follow Ward Peeters on Twitter

Talk to our team of Gatsby Experts to supercharge your website performance.