Thinksharpe
ThinksharpeSoftware Alchemy
Case Study

react-compiler-unmemo

An open source codemod that safely removes useMemo and useCallback from React codebases — streamlining migration from React 18 to React 19 and the React Compiler

Published on npm • MIT Licensed • Zero AST dependencies

npm Package
React Compiler
Codemod
Safe by Default

Project Overview

The Problem

React 19 introduces the React Compiler, which handles memoization automatically. Codebases built on React 18 are littered with useMemo and useCallback calls that are now redundant. Manually removing them across thousands of files is tedious, error-prone, and risks breaking type annotations and import statements.

The Solution

A two-step pipeline that first strips useMemo and useCallback calls using a character-by-character parser, then applies fixups to restore lost type annotations. Safe dry-run by default, idempotent, and handles nested generics, multi-line hooks, and complex edge cases that regex-based tools miss.

Before & After

One command transforms your codebase — removing boilerplate while keeping everything type-safe

BEFORE

const value = useMemo(() => computeExpensiveValue(a, b), [a, b]);

const handler = useCallback((e) => doSomething(e), [doSomething]);

import { useMemo, useCallback, useState } from "react";

AFTER

const value = computeExpensiveValue(a, b);

const handler = (e) => doSomething(e);

import { useState } from "react";

Architecture

A two-step pipeline with a character-by-character parser — no AST dependencies

npx react-compiler-unmemo ./my-app

Entry point — dry-run by default

1

Hook Removal

src/remove-hooks.mjs

Phase 1

Strip generic type parameters from hook calls

Phase 2

Remove hook calls, unwrap arrow functions, strip dep arrays

Phase 3

Clean unused useMemo/useCallback imports

2

Fix Type Annotations

src/fix-type-annotations.mjs

Restore Types

Recover lost generic type annotations from stripped hooks

Infer Context

Heuristic type inference from surrounding code patterns

Clean, type-safe code

Ready for React Compiler — run tsc --noEmit to verify

Key Features

Built for real-world codebases with complex patterns

Character Parser

No AST dependencies

  • Handles nested generics like ColumnsType<TaxArea> that regex can't match
  • Tracks strings, template literals, and escape sequences
  • Comment-aware — skips hooks inside line and block comments

Safe by Default

Dry-run first, write when ready

  • Dry-run is the default — preview all changes before applying
  • Idempotent — safe to re-run without double-processing files
  • Complex hook bodies become IIFEs to preserve correctness

Comprehensive

Handles real-world patterns

  • useMemo, useCallback, and React.* prefixed variants
  • Multi-line hooks spanning dozens of lines with nested objects
  • Import cleanup — removes unused hooks, preserves the rest

Why Remove Manual Memoization?

React Compiler handles memoization automatically — removing hooks is optional but delivers real benefits

Cleaner Code

Less boilerplate, easier to read and maintain

Aligns with Modern React

React Compiler handles memoization automatically

Smaller Bundles

Unused hook imports are removed entirely

Safe to Re-run

Idempotent — won't touch already-processed files

Quick Start

# Preview changes (safe default — no files modified)npx react-compiler-unmemo ./my-react-app# Apply changes when readynpx react-compiler-unmemo ./my-react-app --write# Type-check your project afterwardnpx tsc --noEmit

Results

0

Runtime dependencies beyond glob

100%

Safe dry-run by default

2-step

Pipeline: remove hooks → fix types

"React Compiler works fine with existing manual memoization — it preserves and layers on top of it. Removing hooks is optional for cleanliness and readability, but not required for performance."
— React Documentation

Tech Stack

Node.jsES ModulesCharacter Parserglobnpm RegistryMIT License

Need a migration tool built?

We build developer tools, codemods, and migration utilities — from open source packages to enterprise-grade toolchains.

What We Can Build for You:

Codemods & Migration Tools

Automated code transformations for framework upgrades

npm Packages

Open source and private packages for the JS ecosystem

CLI Developer Tools

Build systems, linters, and workflow automation

Enterprise Toolchains

Custom tooling for large-scale codebases

Specializing in React tooling • Codemods • Open source • Developer experience