# How the React Compiler Is Configured and Memoization Utilized in Instatic

> Discover how Instatic configures the React Compiler and utilizes memoization. Learn how Instatic automates static memoization for components while limiting manual overrides.

- Repository: [CoreBunch/Instatic](https://github.com/CoreBunch/Instatic)
- Tags: internals
- Published: 2026-07-27

---

**TLDR:** Instatic enables the React Compiler project-wide through its Vite and Babel configuration, automatically handling static memoization for components while strictly limiting manual memoization to three documented exceptions.

The CoreBunch/Instatic repository demonstrates a modern approach to React performance optimization by leveraging the React Compiler to eliminate manual memoization overhead. By configuring the compiler at the build level in [`vite.config.ts`](https://github.com/CoreBunch/Instatic/blob/main/vite.config.ts), the project ensures automatic memoization of functions, values, and components across the entire codebase. This article examines the specific configuration patterns, implementation rules, and the strict memoization policy that governs development in this codebase.

## Enabling the React Compiler in Vite Configuration

Instatic activates the React Compiler through the Babel pipeline exposed by Vite. The configuration resides in [`vite.config.ts`](https://github.com/CoreBunch/Instatic/blob/main/vite.config.ts) at the repository root, where the `@babel/preset-react-compiler` preset is imported and applied to the Babel preset array.

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import { reactCompilerPreset } from '@babel/preset-react-compiler'

export default defineConfig({
  // ... other Vite configuration
  babel: {
    presets: [reactCompilerPreset()],
  },
})

```

This preset instructs Babel to process every component file through the React Compiler, which performs **static analysis** to determine optimal memoization points during the build process.

## Automatic Memoization Strategy

Once enabled, the React Compiler applies **static memoization** to all eligible functions, values, and components automatically. This eliminates the need for developers to manually wrap functions with `useCallback`, values with `useMemo`, or components with `React.memo`.

The project enforces a strict **"no manual memoization"** guideline. Developers write straightforward component logic without performance-related hooks, trusting the compiler to generate the most efficient memoization automatically.

## When Manual Memoization Is Allowed

While the compiler handles most optimization automatically, the Instatic codebase documents three specific exceptions where manual memoization remains necessary. These rules are codified in [`docs/reference/react-compiler.md`](https://github.com/CoreBunch/Instatic/blob/main/docs/reference/react-compiler.md).

### Exception 1: Stabilizing Callbacks for Hook Dependencies

When a function is referenced in a dependency array of a hook like `useEffect`, it must maintain a **stable identity** to satisfy the `react-hooks/exhaustive-deps` linter rule. In these cases, `useCallback` is permitted to stabilize the function reference.

```tsx
// src/features/autosave/AutoSave.tsx
import { useCallback, useEffect } from 'react'

export function AutoSave({ save }: { save: () => Promise<void> }) {
  const stableSave = useCallback(() => {
    void save()
  }, [save]) // Required for useEffect dependency array
  
  useEffect(() => {
    const id = setInterval(stableSave, 5000)
    return () => clearInterval(id)
  }, [stableSave])
  
  return null
}

```

### Exception 2: Optimizing Critical List-Rendered Components

Components rendered within large lists may benefit from `React.memo` to avoid unnecessary re-renders, but only after **performance validation** confirms the optimization is necessary. This exception applies specifically to heavy list items where component instances number in the hundreds or thousands.

```tsx
// src/ui/components/List/ListItem.tsx
import React from 'react'

interface Item {
  id: string
  title: string
}

// Memoised to prevent re-renders when parent list updates
export const ListItem = React.memo(function ListItem({ item }: { item: Item }) {
  return <div className="list-item">{item.title}</div>
})

```

### Exception 3: Compiler Escape Hatches

If the compiler cannot process a specific function due to dynamic code patterns or runtime-generated logic, developers may disable the compiler for that block using the `/* @react-compiler-disable */` directive. In these isolated cases, manual memoization may be retained.

```tsx
// src/utils/dynamic/UnsafeDynamicFunction.tsx
/* @react-compiler-disable */
export function UnsafeDynamicFunction({ fn }: { fn: Function }) {
  // Runtime-generated code that the compiler cannot analyze
  return <button onClick={() => fn()}>Run Dynamic Function</button>
}

```

## Key Configuration Files

The memoization strategy spans several configuration and documentation files:

- **[`vite.config.ts`](https://github.com/CoreBunch/Instatic/blob/main/vite.config.ts)** – Configures the Babel preset that enables the React Compiler across the project.
- **[`docs/reference/react-compiler.md`](https://github.com/CoreBunch/Instatic/blob/main/docs/reference/react-compiler.md)** – Documents the memoization policy and the three authorized exceptions for manual optimization.
- **`src/ui/components/**`** – Contains UI components that rely exclusively on automatic compiler memoization.
- **[`eslint.config.js`](https://github.com/CoreBunch/Instatic/blob/main/eslint.config.js)** and **[`react-doctor.config.json`](https://github.com/CoreBunch/Instatic/blob/main/react-doctor.config.json)** – Enforce linting rules that prevent unnecessary manual memoization and validate compiler compliance.

## Summary

- Instatic enables the React Compiler through [`vite.config.ts`](https://github.com/CoreBunch/Instatic/blob/main/vite.config.ts) by adding `reactCompilerPreset` to the Babel configuration.
- The compiler provides **automatic static memoization**, eliminating the need for `useMemo`, `useCallback`, and `React.memo` in standard development.
- Manual memoization is restricted to three scenarios: stabilizing callbacks for hook dependencies, optimizing validated list components, and compiler escape hatches.
- Project documentation in [`docs/reference/react-compiler.md`](https://github.com/CoreBunch/Instatic/blob/main/docs/reference/react-compiler.md) codifies these exceptions, while ESLint configuration enforces the "no manual memoization" rule automatically.

## Frequently Asked Questions

### How do I enable the React Compiler in a Vite project like Instatic?

Install `@babel/preset-react-compiler` and import the preset in your [`vite.config.ts`](https://github.com/CoreBunch/Instatic/blob/main/vite.config.ts) file. Add the preset to the `babel.presets` array in your Vite configuration. This wires the compiler into the build pipeline, processing all React components automatically during compilation.

### Why does Instatic discourage useMemo and useCallback?

Manual memoization hooks add cognitive overhead and code noise while being redundant when the React Compiler performs static analysis to determine optimal memoization points automatically. The compiler generates more efficient memoization than manual implementations while keeping the source code cleaner and easier to maintain.

### When should I use React.memo in Instatic?

Only wrap components with `React.memo` when they are rendered within large lists and performance profiling confirms that re-renders cause measurable degradation. This exception requires validation before application and is documented in [`docs/reference/react-compiler.md`](https://github.com/CoreBunch/Instatic/blob/main/docs/reference/react-compiler.md).

### How do I disable the React Compiler for a specific component?

Add the `/* @react-compiler-disable */` comment directive immediately before the function declaration that the compiler cannot process. This escape hatch prevents the compiler from transforming that specific block, allowing you to retain manual memoization or handle dynamic code patterns that exceed the compiler's static analysis capabilities.