react 19 compiler: say goodbye to useMemo - By Sourav Mishra (@souravvmishra)

for years, we've had to manually optimize our react apps using useMemo and useCallback. it was super annoying and made our code look messy.

well, the new react compiler fixes all of that.

let me show you how it works and why it's a huge deal.

what does it actually do?

when you build your app, the compiler looks at your code and automatically caches values and functions for you.

it basically knows react better than we do.

the old way vs the new way

old and messy

const filteredTodos = useMemo(() => {
  return todos.filter(todo => todo.active);
}, [todos]);

const handleClick = useCallback(() => {
  // stuff
}, []);

new and clean

const filteredTodos = todos.filter(todo => todo.active);

const handleClick = () => {
  // stuff
};

we turned it on for an old project and literally deleted 200 lines of messy boilerplate. the app actually got faster too!

how to turn it on

if you're using next.js 16, it's pretty easy.

1. install the plugin:

npm install babel-plugin-react-compiler

1. flip the switch in next.config.mjs:

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};
export default nextConfig;

do we still need useMemo?

honestly? almost never.

you might only need it if the compiler messes up (which is rare) or if you're working with some weird legacy libraries.

what to remember

• cleaner code: no more dependency arrays!
• automatic speed: it just makes things fast.
• future ready: next.js is going all-in on this.

written by sourav mishra, happy to type less code.