React Native with React Compiler

It was an awesome month (October 2024) for React and React Native devs, there were a lot of updates and releases in React and React Native.

React dropped a public beta version of the React Compiler at React India. React Native dropped a big update with a brand-new architecture. if you want to know more about the new Architecture 👉 Check here.

This blog will show you how to integrate React Compiler in a New React Native Project and how to try it out successfully. I am a big fan of React Native Cli, the below methods use the @react-native-community/cli.

Let’s create a new React Native (RN) project with version 0.76. Run the below command in the terminal and I am using the name of the new RN project as RNWithCompiler.

Integration of React Compiler

Awesome! If you nailed the command on your first try, you're super lucky. If you run into some errors, don't stress about it; that’s totally normal. Trust me, I went through the same thing too!

The compiler is currently released as beta . The Compiler supports React 17+. To install the Beta:

npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta

Or, if you’re using Yarn:

yarn add -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta

By this, we have installed the Compiler as Babel-plugin in the Application. Along with the Compiler, we have also installed eslint-plugin for the Compiler.

Why eslint-plugin-react-compiler?

You may wonder why we are installing the eslint plugin for the compiler.

The ESLint plugin is here to help! It displays any violations of React rules right in your editor.

If you notice a warning, don’t worry — it just means that the compiler has decided not to optimize that particular component or hook. This is totally fine! The great news is that the compiler can still recover and keep optimizing the other components in your codebase.

Replace your .eslintrc.js file with the below code,

module.exports = {
  root: true,
  extends: '@react-native',
  plugins: [
    'eslint-plugin-react-compiler',
  ],
  rules: {
    'react-compiler/react-compiler': 'error',
  },
}

Using React Compiler with React 17 or 18

We are using React 18, we need to install the extra react-compiler-runtime package.

npm install react-compiler-runtime@beta

In Addition to that, add the correct target to your compiler config, where target the major version of React you are targeting:

Replace your babel.config.js file with the below code,

const ReactCompilerConfig = {
  target: '18' // '17' | '18' | '19'
};

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    ['babel-plugin-react-compiler', ReactCompilerConfig],
  ],
};

Hurray!!!, 🎉 You’ve successfully integrated the React Compiler into your React Native project! We’re so close to finishing up. Let’s kick things off by starting the application with a fun sample counter code!

Execute Application

Replace the contents of App.tsx with the code provided below.

import React, { useState } from 'react';
import {
  Button,
  SafeAreaView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
} from 'react-native/Libraries/NewAppScreen';

function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
    flex: 1,
  };
  const [count, setCount] = useState(0);

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
     <View style={styles.container}>
      <Text style={styles.countText}>Hello World {Date.now()}</Text>
      <Text style={styles.countText}>Count: {count}</Text>
      <Button title="Increment" onPress={() => setCount(count + 1)} />
      <Button title="Decrement" onPress={() => setCount(count - 1)} />
     </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    alignContent: 'center',
  },
  countText: {
    fontSize: 24,
    fontWeight: '600',
  },
});

export default App;

Now, let's start the application as per the README.md.

Woohoo! 🎉 You’ve absolutely crushed it by diving into the React Compiler and checking out how it operates in your React Native app! What an amazing achievement!

Bonus

If you’re eager to dive into how the React compiler operates within a React Native application but feel overwhelmed by all the steps, don’t worry—I’ve got you covered! Let’s explore this thrilling journey together!

Github Repo. 👉. RNWithCompiler