Trying out React 18 Alpha

React 18 is here! That's the one with concurrent mode 🥳

Well, it's almost here. You can play with experimental code, check out the working group, and hope library authors update soon.

The gist is that:

1. You don't gotta upgrade
2. New features are opt-in
3. React 16/17 and React 18 code can work together on the same screen
4. Typical apps can "update in an afternoon"
5. Library authors might have work to do
6. Useful Suspense comes later

I've been waiting for this since Experimenting with the new React Concurrent mode in November 2019 and Time Slicing for visualizing large datasets in September 2018. I even tried to get Gatsby working with Suspense in 2019, but that was clunky.

The goods

Biggest update from the UI perspective is the new/better render batching for fewer updates. Reduces DOM writes, increases performance.

React 17 batches updates in event handlers. React 18 will batch updates every time.

function Component() {
  const [boop, setBoop] = useState(2)
  const [booper, setBooper] = useState(3)

  // 2 re-renders
  function onClick() {
    fetch().then(() => {
      setBoop(3)
      setBooper(4)
    })
  }

  // 1 re-render
  function onClick() {
    setBoop(3)
    setBooper(4)
  }
}

When you opt into React 18 features, both those cases trigger 1 component re-render. Your UI becomes faster and more responsive with no extra work 🤘

ServerSideRendering gets a new streaming mode and easier-to-use hydration support. This one's for folks like Gatsby and NextJS. Or if you were brave enough to roll your own.

A good lesson in Not Invented Here. Leave the fiddly stuff to the fiddlers.

Suspense gets a behavior update that makes it easier to understand.

<Suspense fallback={<Loading />}>
  <ComponentThatSuspends />
  <Sibling />
</Suspense>

The point of <Suspense> is to enable loading modes in your UI. Instead of {isLoading && <Component>}, you can let React handle that for you.

Fantastic when different components have to coordinate their loading – lets you avoid spinner cascades. They suck.

With React 17, that <Sibling> component would mount, run its effects, then hide. Now it waits until data is ready. As I think it always should have.

More to come in 18.x updates.

Concurrent features

A gaggle of exciting new APIs that let you tell React "Hey this update is less important, do it later"

Fantastic for large re-draws, data visualization, and anywhere your app feels a little janky right now. I've got this issue in production where you click a button and we redraw 300 components with 10 complex hooks each.

This will help.

startTransition lets you mark an update as a transition. You could hack this with time slicing – setTimeout – but that's a delay and may lag. startTransition is synchronous.

useDeferredValue lets you update state with a delay.

The new <SuspenseList> allows you to coordinate how loading spinners cascade. This will become more useful in 18.x versions.

The new streaming SSR API with partial hydration lets you hydrate parts of the app while the rest loads. Make above-the-fold instantly interactive, let the rest load later 🤞

How to opt-in

You'll want to install React from the latest alpha tag.

yarn add react@alpha react-dom@alpha

Expect broken-ness, changing APIs, and shifting details. When they say Alpha, they mean it.

A change to the root opts you in:

const root = ReactDOM.createRoot(container)
root.render(<App />)

Anything below <App /> has access to the new features. You can use this alongside the old ReactDOM.render(<App />, container); API.

Read more details about how root changes on the working group pages.

Let's try it out

Now the fun part, can you see a difference?

Trying to come up with a good React 18 experiment for today's blog and it's hard because time slicing already solved a lot of these problems in 2018 😅

I mean it didn't, but it visually looks like it did.

— Swizec Teller (@Swizec) June 11, 2021

We put React 18 to the test with an old computer science and mathematics game – a random walk, sometimes called The Drunkard's Walk. The math is fun, the visuals are better.

Observe, in React 17:

At first all is well.

But the code is designed to be naive and inefficient. As the walk grows longer, each re-draw takes longer and longer. Adding steps slows down because we copy arrays.

With luck, you'll see this lag as you type in the input field.

Now try it out in React 18:

Can you see the difference?

I felt typing was smoother and animation was more jagged. As expected. Might be placebo? Always hard to tell.

Read the comments to learn how it works. ✌️

Cheers,
~Swizec

Published on June 11th, 2021 in React, Technical

Did you enjoy this article?

👎👍

Continue reading about Trying out React 18 Alpha

Semantically similar articles hand-picked by GPT-4

• Why I'm excited about React 18 – talk
• Experimenting with the new React Concurrent mode
• React 18 and the future of async data
• Async React with NextJS 13
• A better React 18 startTransition demo

Learned something new?
Read more Software Engineering Lessons from Production

I write articles with real insight into the career and skills of a modern software engineer. "Raw and honest from the heart!" as one reader described them. Fueled by lessons learned over 20 years of building production code for side-projects, small businesses, and hyper growth startups. Both successful and not.

Subscribe below 👇

Software Engineering Lessons from Production

Join Swizec's Newsletter and get insightful emails 💌 on mindsets, tactics, and technical skills for your career. Real lessons from building production software. No bullshit.

"Man, love your simple writing! Yours is the only newsletter I open and only blog that I give a fuck to read & scroll till the end. And wow always take away lessons with me. Inspiring! And very relatable. 👌"

~ Ashish Kumar

Your NameYour EmailYour AddressSubscribe now

Join 16K+ engineers learning lessons from my "raw and honest from the heart" emails.

Senior Mindset Book

Get promoted, earn a bigger salary, work for top companies

Learn more

Have a burning question that you think I can answer? Hit me up on twitter and I'll do my best.

Who am I and who do I help? I'm Swizec Teller and I turn coders into engineers with "Raw and honest from the heart!" writing. No bullshit. Real insights into the career and skills of a modern software engineer.

Want to become a true senior engineer? Take ownership, have autonomy, and be a force multiplier on your team. The Senior Engineer Mindset ebook can help 👉 swizec.com/senior-mindset. These are the shifts in mindset that unlocked my career.

Curious about Serverless and the modern backend? Check out Serverless Handbook, for frontend engineers 👉 ServerlessHandbook.dev

Want to Stop copy pasting D3 examples and create data visualizations of your own? Learn how to build scalable dataviz React components your whole team can understand with React for Data Visualization

Want to get my best emails on JavaScript, React, Serverless, Fullstack Web, or Indie Hacking? Check out swizec.com/collections

Did someone amazing share this letter with you? Wonderful! You can sign up for my weekly letters for software engineers on their path to greatness, here: swizec.com/blog

Want to brush up on your modern JavaScript syntax? Check out my interactive cheatsheet: es6cheatsheet.com

By the way, just in case no one has told you it yet today: I love and appreciate you for who you are ❤️