Swizec Teller - a geek with a hatswizec.com

    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?

    Swizec Teller published ServerlessHandbook.dev avatarSwizec Teller published ServerlessHandbook.dev@Swizec
    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.

    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

    Did you enjoy this article?

    Published on June 11th, 2021 in React, Technical

    Learned something new?
    Want to become an expert?

    Here's how it works 👇

    Leave your email and I'll send you thoughtfully written emails every week about React, JavaScript, and your career. Lessons learned over 20 years in the industry working with companies ranging from tiny startups to Fortune5 behemoths.

    Join Swizec's Newsletter

    And get thoughtful letters 💌 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

    Join over 14,000 engineers just like you already improving their careers with my letters, workshops, courses, and talks. ✌️

    Have a burning question that you think I can answer? I don't have all of the answers, but I have some! Hit me up on twitter or book a 30min ama for in-depth help.

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

    Curious about Serverless and the modern backend? Check out Serverless Handbook, modern backend for the frontend engineer.

    Ready to learn how it all fits together and build a modern webapp from scratch? Learn how to launch a webapp and make your first 💰 on the side with ServerlessReact.Dev

    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 ❤️

    Created bySwizecwith ❤️