How do I know if the React Compiler is working?

[salieflewis]

I read in the React Native 0.78 Release Notes that "components that are memoized have the Memo ✨ tag attached to them in the Component Inspector."

I'm using Expo SDK 52 and followed the instructions here for enabling React Compiler, yet I don't see any of those Memo ✨ tags when viewing the React DevTools. Is it safe to assume that it should appear in the version of React Native that I am using (0.76.7) or is there something else I need to do to enable it?

[zaxovaiko]

I followed the exact instructions as you did, and I can't see this Memo ✨ thing. But I tried to see if actual rerenders of child components are happening, and it appears that they are not. So, I assume the setup of RC is working, but it doesn't show the memo badge on dev tools for some reason.

export default function Compiler() {
  const [count, setCount] = useState(0);

  return (
    <>
      <Button title={`Count: ${count}`} onPress={() => setCount(p => p + 1)} />
      <Random />
    </>
  );
}

const Random = () => {
  return (
      <Text>{Math.random()}</Text>
  );
};

[salieflewis]

Yeah this is so odd to me, and in my conversation with @hirbod on Twitter, he suggested that they should be. So I'm a bit confused as well.

[AndreiTS]

I recommend using this extension: https://marketplace.visualstudio.com/items?itemName=blazejkustra.react-compiler-marker

It shows if the component you are working is memoized by the compiler.

The react extension for chrome doesn't work 100%

[blazejkustra]

Thank you! 🙌