Spread the love

And finally, React 18 has already arrived with some cool features primarily for maintainers of third-party libraries. The react team suggests that if you’re learning, teaching, or using React to build user-facing applications you can simply ignore it. The best part is there are no significant out-of-the-box breaking changes to component behavior. They said that you can upgrade within a single afternoon. WOW!!

Then, What’s new in react 18

1. The New Root API

Remember root API?

import ReactDOM from ‘react-dom’;
import App from 'App';

ReactDOM.render(<App />, document.getElementById('root'));

This is now called Legacy root API. and it is deprecated! and replaced with the new root API. But you can keep using the legacy root API.

import ReactDOM from ‘react-dom’;
import App from 'App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<App />);

ReactDom.createRoot is used instead of ReactDom.render. Also, the hydrate function is added as option on the createRoot.

  • Before
import ReactDOM from 'react-dom';
import App from 'App';

const container = document.getElementById('app');

ReactDOM.hydrate(<App tab="home" />, container);
  • After
import ReactDOM from ‘react-dom’;
import App from 'App';

const container = document.getElementById('app');
const root = ReactDOM.createRoot(container, { hydrate: true });

root.render(<App tab="home" />);

More explanation on above changes

2. startTransition API

This is a new API introduced in this release. It helps react to keep the current page responsive while doing heavy non-blocking UI updates at the same time. It provides a way to differentiate between quick updates and delayed updates.

A delayed update means the transition from one UI to another. A quick update is like clicking, typing, hovering. When using a delayed update we have to call startTransision API like the following

startTransition(() => {
  setImge(img);
});

3. Automatic Batching

Batching is whenever multiple state updates are combined into a single re-render for better performance.

For example, If you have multiple re-renders in a single button click event, react batches those re-renders into one re-render.

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    setCount(c => c + 1); // Does not re-render yet
    setFlag(f => !f); // Does not re-render yet
    // React will only re-render once at the end (that's batching!)

  }

  return (
    <div>
      <button onClick={handleClick}>Next</button>
      <h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
    </div>
  );
}

As you see above react re-renders only once for both setCount() and setFlag() states. This is called automatic batching.

What if you want to stop automatic batching? well, flushSync is here to help you. Whenever you use flushSync it will re-render your component every time it’s done running the function you’re passing it to.

import {flushSync} from 'react-dom';

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    flushSync(()=> {
      setCount(c => c + 1); 
    });
   flushSync(()=> {
     setFlag(f => !f); 
   });
  }
  return (
    <div>
      <button onClick={handleClick}>Next</button>
      <h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
       </div>
  );
}

Then react re-renders your component twice.

4. Strict Effects

When a component is wrapped in Strict Effects, React will make sure to “intentionally” run side-effects twice to detect unusual behavior/pattern, which usually a pain point when working with useEffect mounting and cleanup functions.

5. Suspense and SSR (Server Side Rendering)

The way SSR work is by rendering all the Components on the server first, then sending the result as HTML to the browser. As a result, you’d have to wait for every component to be rendered to begin hydration, but now components wrapped with Suspense won’t block hydration anymore.

6. useDeferredValue

useDeferredValue takes two parameters. a state value and a timeout in milliseconds. And it returns a “deferred version” of that value lagged by the provided timeout seconds.

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

Then, How to install

React 18 is an alpha release right now. It is not suitable for production. The stable release is will take months after the alpha release.

To install you can use @alpha tag

npm install react@alpha react-dom@alpha

Let’s wrap it up

As we’ve seen above the new update of React is mostly to upgrade the existing concurrency features.


0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *