React 18 introduced several new features and improvements over React 17. Here are some of the key differences and examples of new features in React 18:

Key Features in React 18

1. Concurrent Rendering:

• React 18 introduces concurrent rendering, which allows React to prepare multiple versions of the UI at the same time.

• This improves the performance and responsiveness of the application.

2. Automatic Batching:

• Automatic batching groups multiple state updates into a single re-render for better performance.

• Previously, only updates inside React event handlers were batched.

3. Transition API:

• The startTransition API lets you mark updates as non-urgent. React will keep the interface responsive by interrupting these transitions if more urgent updates like clicks or typing come in.

4. Suspense Improvements:

• React 18 enhances Suspense for data fetching. This makes it easier to coordinate asynchronous operations in a declarative way.

5. New Hooks:

• useId: Generates unique IDs to avoid mismatches when rendering on the server and client.

• useTransition: Allows marking updates as transitions.

6. Concurrent Features:

• createRoot: A new root API for creating concurrent roots.

• useDeferredValue: Allows you to defer re-rendering a non-urgent part of the UI.

Example Code Differences

Concurrent Rendering

React 17:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

React 18:

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App />);

Automatic Batching

React 17:

import React, { useState } from 'react';

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

  function handleClick() {
    setCount(count + 1);
    setCount(count + 1);
  }

  return (
    <div>
      <button onClick={handleClick}>Increment</button>
      <p>{count}</p>
    </div>
  );
}

• In React 17, the count will be incremented by 1 because state updates are not automatically batched outside event handlers.

React 18:

import React, { useState } from 'react';

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

  function handleClick() {
    setCount(count + 1);
    setCount(count + 1);
  }

  return (
    <div>
      <button onClick={handleClick}>Increment</button>
      <p>{count}</p>
    </div>
  );
}

• In React 18, the count will be incremented by 2 because state updates are automatically batched.

Transition API

React 18:

import React, { useState, useTransition } from 'react';

function App() {
  const [isPending, startTransition] = useTransition();
  const [count, setCount] = useState(0);

  function handleClick() {
    startTransition(() => {
      setCount(count + 1);
    });
  }

  return (
    <div>
      <button onClick={handleClick} disabled={isPending}>
        {isPending ? 'Loading...' : 'Increment'}
      </button>
      <p>{count}</p>
    </div>
  );
}

useId Hook

React 18:

import React, { useId } from 'react';

function App() {
  const id = useId();

  return (
    <div>
      <label htmlFor={id}>Name</label>
      <input id={id} type="text" />
    </div>
  );
}

These examples highlight some of the new features and improvements in React 18 compared to React 17. The new concurrent features and hooks provide more flexibility and better performance for building modern React applications.