🚀 Getting Started with React 18 (Next.js Edition)

By Amitesh Maurya | Category: React | | 8 min read

React 18 is already baked into Next.js 13+, so if you’re starting a fresh project, you’re automatically getting all the new features like concurrent rendering and automatic batching. Let’s break down how to set things up and actually use them.

What’s New in React 18?

Some highlights:React 18 Overview

Creating a New Project

Next.js already ships with React 18. Just run:

npx create-next-app@latest my-app
cd my-app
npm run dev

No More ReactDOM.render

Next.js uses the new createRoot API internally. You don’t need to set it up manually — just write components, and Next.js handles the rest.

Automatic Batching in Action

In React 18, multiple state updates — even inside timeouts, promises, or event handlers — are batched together:

"use client";
import { useState } from "react";

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

  const handleClick = () => {
    setTimeout(() => {
      setCount(c => c + 1);
      setFlag(f => !f);
      // Both happen in one render now
    }, 1000);
  };

  return (
    <>
      <h3>{count} | {flag.toString()}</h3>
      <button onClick={handleClick}>Update</button>
    </>
  );
}

The useId Hook

Perfect for forms & accessibility:

import { useId } from "react";

export default function MyInput() {
  const id = useId();
  return (
    <>
      <label htmlFor={id}>Name:</label>
      <input id={id} type="text" />
    </>
  );
}

Conclusion

Next.js + React 18 = faster apps, better UX, and cleaner code. If you’re on Next.js 13 or higher, you’re already using React 18 — so go ahead and try out these new features.