How To Use the New React Compiler Today

A simple example in Next.js

The new React compiler is here and ready to be used — at least in an experimental state. Here is how you can try it out already!

We need only create a new Next.js project. I will link the entire code at the end of this article.

npx create-next-app my-next-app

To use the new compiler, we can’t stick with the default versions of Next and React. We need to use the latest beta versions, so make sure to copy the exact same dependencies into your project and go for a yarn install.

  "dependencies": {
    "next": "14.3.0-canary.70",
    "react": "19.0.0-beta-26f2496093-20240514",
    "react-dom": "19.0.0-beta-26f2496093-20240514",
    "babel-plugin-react-compiler": "0.0.0-experimental-592953e-20240517"
  }

Now, let’s look at our code example, which shows us what the React compiler optimizes.

'use client'
import { useState } from 'react'

// Will render unnecessarily: 
function OtherComponent() {
  console.log('OtherComponent renders')
  return <p>Hello!</p>
}

export default function MyComponent() {
  const [count, setCount] = useState(0)

  const handleClick = () => {
    setCount((prevCount) => prevCount + 1)
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button…