Enabling React Compiler

React Compiler automatically memoizes components and hooks where the rules of React allow it, so you don't write useMemo, useCallback, or memo by hand. The Babel plugin runs during the Rspack build and applies to all four Bullet configurations: client, server, android, and ios.

Install the plugin

Configure Babel

Add "module:babel-plugin-react-compiler" to the plugins array in babel.config.cjs. The module: prefix tells the SWC Babel bridge to load it from node_modules.

module.exports = (api) => {
	const platform = api.caller((caller) => caller?.platform);
 
	return {
		presets: ["module:@react-native/babel-preset"],
		plugins: [
			"module:babel-plugin-react-compiler", 
			platform === "web" && "module:babel-plugin-react-native-web",
		].filter(Boolean),
	};
};

No changes to rspack.config.ts are needed. The SWC loader calls Babel on every JS and TS file, so the compiler runs across all build targets automatically.

Compiler options

Pass options as a tuple to control compilation behavior. See the React Compiler docs for the full list of options.

module.exports = (api) => {
	const platform = api.caller((caller) => caller?.platform);
 
	return {
		presets: ["module:@react-native/babel-preset"],
		plugins: [
			["module:babel-plugin-react-compiler", { compilationMode: "annotation" }], 
			platform === "web" && "module:babel-plugin-react-native-web",
		].filter(Boolean),
	};
};