Configuration for babel-plugin-react-compiler with extensive environment options for optimizing React components.
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;
}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
}
}
}
}]
]
};The preset automatically configures React Compiler with these defaults:
React Compiler integration requires:
babel-plugin-react-compiler installed as a dependencyexperiments.reactCompiler: true in app.json (SDK 51+)infer: Automatically detect components to optimize (recommended)strict: Apply stricter optimization rules for maximum performancenone: No panic threshold, continue compilation on errorsall_errors: Stop compilation on any errorcritical_errors: Stop only on critical errors that prevent optimizationReact Compiler is automatically enabled when:
babel-plugin-react-compiler package is detected'react-compiler': false