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