or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.mdperformance-optimizations.mdplatform-options.mdpreset-configuration.mdreact-compiler.mdserver-components.md
tile.json

react-compiler.mddocs/

React Compiler Integration

Configuration for babel-plugin-react-compiler with extensive environment options for optimizing React components.

Capabilities

React Compiler Configuration

Settings to pass to babel-plugin-react-compiler for automatic React optimization.

interface ReactCompilerOptions {
  /** Enable useMemoCachePolyfill for compatibility */
  enableUseMemoCachePolyfill?: boolean;
  /** Compilation mode for React Compiler */
  compilationMode?: 'infer' | 'strict';
  /** Panic threshold for error handling */
  panicThreshold?: 'none' | 'all_errors' | 'critical_errors';
  /** Logger instance for debugging */
  logger?: any;
  /** React Compiler environment configuration */
  environment?: ReactCompilerEnvironment;
  /** Gating configuration for selective compilation */
  gating?: unknown;
  /** Disable code emission (analysis only) */
  noEmit?: boolean;
  /** Runtime module for compiler helpers */
  runtimeModule?: string | null;
  /** ESLint suppression rules */
  eslintSuppressionRules?: unknown | null;
  /** Flow type suppression */
  flowSuppressions?: boolean;
  /** Ignore useNoForget directive */
  ignoreUseNoForget?: boolean;
}

Environment Configuration

Detailed environment options for React Compiler behavior.

interface ReactCompilerEnvironment {
  /** Custom hook definitions */
  customHooks?: unknown;
  /** Enable cache reset on source file changes (development) */
  enableResetCacheOnSourceFileChanges?: boolean;
  /** Preserve existing memoization guarantees (default: true) */
  enablePreserveExistingMemoizationGuarantees?: boolean;
  /** Validate memoization guarantees (default: true) */
  validatePreserveExistingMemoizationGuarantees?: boolean;
  /** Enable Forest optimization */
  enableForest?: boolean;
  /** Enable use type annotations */
  enableUseTypeAnnotations?: boolean;
  /** Enable reactive scopes in HIR (default: true) */
  enableReactiveScopesInHIR?: boolean;
  /** Validate hooks usage (default: true) */
  validateHooksUsage?: boolean;
  /** Validate ref access during render */
  validateRefAccessDuringRender?: boolean;
  /** Validate no setState in render (default: true) */
  validateNoSetStateInRender?: boolean;
  /** Validate memoized effect dependencies */
  validateMemoizedEffectDependencies?: boolean;
  /** Validate no capitalized calls */
  validateNoCapitalizedCalls?: string[] | null;
  /** Assume hooks follow React rules (default: true) */
  enableAssumeHooksFollowRulesOfReact?: boolean;
  /** Transitively freeze function expressions (default: true) */
  enableTransitivelyFreezeFunctionExpressions: boolean;
  /** Enable emit freeze optimization */
  enableEmitFreeze?: unknown;
  /** Enable emit hook guards */
  enableEmitHookGuards?: unknown;
  /** Enable emit instrument forget */
  enableEmitInstrumentForget?: unknown;
  /** Assert valid mutable ranges */
  assertValidMutableRanges?: boolean;
  /** Enable change variable codegen */
  enableChangeVariableCodegen?: boolean;
  /** Enable memoization comments */
  enableMemoizationComments?: boolean;
  /** Throw unknown exceptions (test only) */
  throwUnknownException__testonly?: boolean;
  /** Enable treat function deps as conditional */
  enableTreatFunctionDepsAsConditional?: boolean;
  /** Enable custom type definition for Reanimated */
  enableCustomTypeDefinitionForReanimated?: boolean;
  /** Hook pattern for custom hook detection (default: null) */
  hookPattern?: string | null;
}

Usage Examples:

// Enable React Compiler with basic settings
module.exports = {
  presets: [
    ['babel-preset-expo', {
      'react-compiler': {
        compilationMode: 'strict'
      }
    }]
  ]
};

// Advanced React Compiler configuration
module.exports = {
  presets: [
    ['babel-preset-expo', {
      'react-compiler': {
        compilationMode: 'infer',
        panicThreshold: 'critical_errors',
        environment: {
          enableResetCacheOnSourceFileChanges: true,
          validateHooksUsage: true,
          enableCustomTypeDefinitionForReanimated: true
        }
      }
    }]
  ]
};

// Disable React Compiler
module.exports = {
  presets: [
    ['babel-preset-expo', {
      'react-compiler': false
    }]
  ]
};

// Platform-specific React Compiler settings
module.exports = {
  presets: [
    ['babel-preset-expo', {
      web: {
        'react-compiler': {
          compilationMode: 'strict'
        }
      },
      native: {
        'react-compiler': {
          compilationMode: 'infer',
          environment: {
            enableCustomTypeDefinitionForReanimated: true
          }
        }
      }
    }]
  ]
};

Automatic Configuration

The preset automatically configures React Compiler with these defaults:

  • Target: React 19 features
  • Development: Cache reset enabled, no panic threshold
  • Production: Cache reset disabled, panic threshold set to 'NONE'
  • Reanimated Integration: Custom type definitions enabled when Reanimated detected

Requirements

React Compiler integration requires:

  1. babel-plugin-react-compiler installed as a dependency
  2. experiments.reactCompiler: true in app.json (SDK 51+)
  3. React 18+ for optimal compatibility

Compilation Modes

  • infer: Automatically detect components to optimize (recommended)
  • strict: Apply stricter optimization rules for maximum performance

Error Handling

  • none: No panic threshold, continue compilation on errors
  • all_errors: Stop compilation on any error
  • critical_errors: Stop only on critical errors that prevent optimization

Environment Detection

React Compiler is automatically enabled when:

  • babel-plugin-react-compiler package is detected
  • Not processing node_modules code
  • Not in server environment (client-side only)
  • Not explicitly disabled via 'react-compiler': false