React 18: Everything you need to know
Tags: react, webdev, javascript, programming
Published: 2022-04-03 04:44:19

---
canonical_url: https://tapajyoti-bose.medium.com/react-18-everything-you-need-to-know-719fab63e88b
---

After the release of **React 17** (famously known as the **no-feature release**), we finally have the stable version of **React 18**, which went live on **29th March 2022**. Wondering what changed in the new version? This article got you covered!

## Initialization Changes

If your app is using an old version of **React**, you can update it to the latest version using

```bash
npm install react@18.0.0 react-dom@18.0.0
```

OR

```bash
yarn add react@18.0.0 react-dom@18.0.0
```

There are no breaking changes in **React 18**, but the setup has been modified to utilize the new features. In the `index` file, there is a new syntax to plug in the **React App**.

```js
// OLD METHOD:
import ReactDOM from "react-dom";
// ...
ReactDOM.render(<App />, document.getElementById("root"));

// NEW METHOD:
import ReactDOM from "react-dom/client";
// ...
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
```

With that small tweak, you are good to go! You can now use the plethora of new features **React 18** has to offer.

## Concurrent Mode

If the entire **React 18** update has to be summed up in one word, it would be **Concurrency**.

At a high level, **concurrency** basically means that tasks can overlap. Rather than one state update having to be fully complete before the system can move on to the next one, **concurrency** allows us to bounce back and forth between multiples.

It should be noted that this doesn't mean those things are all happening at the same time — rather, it's that **one task can now be paused while other, more urgent tasks are completed**.

Let's take a look at the new APIs to utilize it!

### `useTransition`

The `useTransition` **hook** is a new **API** that allows the users to mark any less-urgent actions as _transitions_ and then tell **React** to let other, more urgent actions take priority in the rendering timeline.

The ideal use case of it would be when **multiple non-urgent but computationally expensive tasks are being performed** (eg: filtering a long list), **which causes a delay in urgent tasks** (eg: handling user input), resulting in a poor **UX**.

```js
// POOR UX DUE TO FREEZING OF THE UI
const [input, setInput] = useState("");
const data = millionItems.filter((item) => item.includes(input));
const updateInput = (e) => setInput(e.target.value);

// GREAT UX DUE TO PRIORITIZATION
const [input, setInput] = useState("");
const [data, setData] = useState([...items]);
const [isPending, startTransition] = useTransition();

useEffect(() => {
  startTransition(() => {
    setData(items.filter((i) => i.includes(input)));
  });
}, [input]);

const updateInput = (e) => setInput(e.target.value);
```

The `isPending` value can also be used to conditionally display a spinner to inform the user that some action is being performed in the background.

### `useDeferredValue`

The new `useDeferredValue` **hook** allows us to select specific parts of our **UI** and intentionally defer updating them so they don't slow down other parts of our page. There are two nice things about this:

1. Control over rendering order
2. Ability to show previous or old values instead of just a loading animation or grey box.

In most cases, **displaying a few pieces of stale data triumphs over showing a full-page loading animation**.

Let's take a look at how to use the **hook**:

```js
const deferredValue = useDeferredValue(value);
return <MyComponent value={deferredValue} />;
```

Both the `useTransition` and `useDeferredValue` **hooks** take an additional parameter to specify the timeout in milliseconds.

```js
// useTransition
const [isPending, startTransition] = useTransition({
  timeoutMs: 3000,
});

// useDeferredValue
const deferredValue = useDeferredValue(value, {
  timeoutMs: 3000,
});
```

## Automatic Batching

**Batching** refers to grouping multiple state updates into a single re-render for better performance. This is great for performance because it **avoids unnecessary re-renders**.

Earlier **React** would **batch** changes due to browser actions, but not the state changes triggered inside **Promises** or **Timeouts**. In **React 18**, the developers overcame the hurdle and made it possible to **batch** all state updates.

```js
// Before: only React events were batched.
setTimeout(() => {
  setCount((c) => c + 1);
  setFlag((f) => !f);
  // React will render twice, once for each state update
}, 1000);

// After: updates inside of timeouts, promises,
// native event handlers or any other event are batched.
setTimeout(() => {
  setCount((c) => c + 1);
  setFlag((f) => !f);
  // React will only re-render once at the end
}, 1000);
```

## Streaming Server-Side Rendering

**Server-Side Rendering** is a technique where you render the **HTML** output of your **React** component, and then send that over to the client before the **JS** is ready so that the user is not stuck staring at a completely blank page. It has incredible **performance** and **SEO** benefits.

Before **React 18**, this was handled in an all-or-nothing approach – when all the components were ready, the page would be generated. That meant that if you had just one slow component, that one component could create a **bottleneck**.

This can be avoided using `Suspense`! We could wrap a single slow component in the `Suspense` tags and tell **React** to delay its loading and instead focus on sending down the other, smaller ones first. You can also set a fallback to show a loading animation:

```js
<Suspense fallback={<Loading />}>
  <SlowComponent />
</Suspense>
```

Now you are **React 18** ready too!

![i-am-ready](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/62e16lewg3yfo2cdjyd6.jpg)

**Happy Developing!**

Finding **personal finance** too intimidating? Checkout my **Instagram** to become a [**Dollar Ninja**](https://www.instagram.com/the.dollar.ninja/)

# Thanks for reading

Need a **Top Rated Front-End Development Freelancer** to chop away your development woes? Contact me on [Upwork](https://www.upwork.com/o/profiles/users/~01c12e516ee1d35044/)

Want to see what I am working on? Check out my [Personal Website](https://tapajyoti-bose.vercel.app) and [GitHub](https://github.com/ruppysuppy)

Want to connect? Reach out to me on [LinkedIn](https://www.linkedin.com/in/tapajyoti-bose/)

I am a freelancer who will start off as a **Digital Nomad** in mid-2022. Want to catch the journey? Follow me on [Instagram](https://www.instagram.com/tapajyotib/)

Follow my blogs for **Weekly new Tidbits** on [Dev](https://dev.to/ruppysuppy)

**FAQ**

These are a few commonly asked questions I get. So, I hope this **FAQ** section solves your issues.

1. **I am a beginner, how should I learn Front-End Web Dev?**
   Look into the following articles:

    1. [Front End Development Roadmap](https://dev.to/ruppysuppy/front-end-developer-roadmap-zero-to-hero-4pkf)
    2. [Front End Project Ideas](https://dev.to/ruppysuppy/5-projects-to-master-front-end-development-57p)