{"id":9362,"date":"2025-04-04T12:21:57","date_gmt":"2025-04-04T10:21:57","guid":{"rendered":"https:\/\/kabisa.nl\/?p=9362"},"modified":"2025-04-04T12:25:25","modified_gmt":"2025-04-04T10:25:25","slug":"more-efficient-code-with-the-react-compiler","status":"publish","type":"post","link":"https:\/\/kabisa.nl\/en\/insights\/more-efficient-code-with-the-react-compiler\/","title":{"rendered":"More efficient code with the React Compiler"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

The React Compiler, is a build-time tool designed to automatically optimize React applications by handling memoization and reducing unnecessary re-renders. This compiler, formerly known as React Forget, was first introduced at React Conf in 2021.<\/h3>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

What Does It Do Exactly?<\/h2>

The primary function of the React Compiler is to automate the memoization process in React applications. Memoization is an optimization technique where the results of expensive function calls are cached so that subsequent calls with the same arguments can return the cached result, improving performance. React offers hooks like <\/span>useMemo<\/span>, <\/span>useCallback<\/span>, and higher-order components like <\/span>React.memo<\/span> to manually handle memoization. However, these manual methods can be error-prone and challenging to maintain. Especially if you want to prevent unnecessary rerenders of child components. The React Compiler addresses this by automatically analyzing the code and applying memoization where necessary, ensuring that components re-render only when their inputs change.<\/span><\/p>

How to use it today?<\/h2>

To integrate the React Compiler into your project, follow these steps:<\/span><\/p>

Check Compatibility<\/span>: Before installation, it’s advisable to assess your codebase’s compatibility with the React Compiler. Run the following command:<\/span><\/p>


<\/span>npx react-compiler-healthcheck@latest<\/span><\/p>


<\/span>or, if you are using yarn:<\/span><\/p>

\u00a0<\/p>

yarn dlx react-compiler-healthcheck@latest<\/span><\/p>

This script evaluates how many components in your project can be optimized by the compiler and checks for any incompatible libraries.<\/span><\/p>

Output looks like this:<\/span><\/p>

Successfully compiled 46 out of 52 components.<\/span><\/p>

StrictMode usage found.<\/span><\/p>

Found no usage of incompatible libraries.<\/span><\/p>

\u00a0<\/p>

Install the Compiler and ESLint Plugin<\/span>: If your project is compatible, proceed to install the React Compiler and its accompanying ESLint plugin:<\/span><\/p>


<\/span>npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta<\/span><\/p>

\u00a0<\/p>

or, if you are using yarn:<\/span><\/p>

\u00a0<\/p>

yarn add -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta<\/span><\/p>

The ESLint plugin provides real-time feedback in your code editor, highlighting areas where the compiler’s optimizations apply.<\/span><\/p>

It mainly checks if your code violates <\/span>the rules of React.<\/span><\/a><\/p>

Next step, if you are using Vite, update the configuration of the React plugin:<\/span><\/p>


<\/span>const ReactCompilerConfig = {<\/span><\/p>

\u00a0\u00a0\/* In my case, I left this empty *\/<\/span><\/p>

};<\/span><\/p>

\/\/ https:\/\/vitejs.dev\/config\/<\/span><\/p>

export default defineConfig({<\/span><\/p>

\u00a0\u00a0plugins: [<\/span>
<\/span>\u00a0 \u00a0 react({<\/span><\/p>

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0babel: {<\/span><\/p>

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0plugins: [[“babel-plugin-react-compiler”, ReactCompilerConfig]]<\/span><\/p>

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span><\/p>

\u00a0\u00a0\u00a0\u00a0}),<\/span><\/p>

\u00a0\u00a0\u00a0\u00a0\/\/ \u2026<\/span><\/p>

\u00a0\u00a0],<\/span><\/p>

});<\/span><\/p>

How to test if it works?<\/h2>

If you are using the React developer tools<\/a> plugin for your browser, and you inspect your component tree, you will see that most of the components now have a [ Memo \u2728 ] mark.<\/p>

Without the React Compiler:<\/p>

\"\"<\/p><\/td>

With the React Compiler:<\/p>

\"\"<\/p><\/td><\/tr><\/tbody><\/table>

Benefits<\/h2>

I was hoping that the React compiler would make my application faster. Not that it was slow, but extended use (as a mobile PWA game) was quite taxing on the battery.<\/p>

After enabling the React compiler, I measured the render time in the profiler, and the render time was halved<\/b>! Even though the compiler is still in beta, the benefits are really noticeable.<\/p>

Render time without<\/strong> React Compiler:<\/p>

\"\"<\/p>

Render time with<\/strong> React Compiler:<\/p>

\"\"<\/p>

Same amount of actions took 3.6ms of rendertime, while it was 7.3ms without the compiler<\/p>

And the nice thing is that all these memoizations are not part of the codebase, keeping the code readable and focussed on features. All these wrappings of memoization made the bundler a bit bigger, (about 20k) but that was a really small price to pay for the performance gains.<\/p>

I think the compiler is a great success and I am really curious what further optimizations will be added in the compiler. The beta so far has been great!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

The React Compiler, is a build-time tool designed to automatically optimize React applications by handling memoization and reducing unnecessary re-renders. This compiler, formerly known as React Forget, was first introduced at React Conf in 2021. What Does It Do Exactly? The primary function of the React Compiler is to automate the memoization process in React […]<\/p>\n","protected":false},"author":15,"featured_media":9359,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[149],"tags":[],"class_list":["post-9362","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tech"],"yoast_head":"\nMore efficient code with the React Compiler | Kabisa Software Artisans<\/title>\n<meta name=\"description\" content=\"The React Compiler, is a build-time tool designed to automatically optimize React applications by handling memoization and reducing unnecessary re-renders. This compiler, formerly known as React Forget, was first introduced at React Conf in 2021.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kabisa.nl\/en\/insights\/more-efficient-code-with-the-react-compiler\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"More efficient code with the React Compiler | Kabisa Software Artisans\" \/>\n<meta property=\"og:description\" content=\"The React Compiler, is a build-time tool designed to automatically optimize React applications by handling memoization and reducing unnecessary re-renders. This compiler, formerly known as React Forget, was first introduced at React Conf in 2021.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kabisa.nl\/en\/insights\/more-efficient-code-with-the-react-compiler\/\" \/>\n<meta property=\"og:site_name\" content=\"Kabisa Software Artisans\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kabisaict\" \/>\n<meta property=\"article:published_time\" content=\"2025-04-04T10:21:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-04T10:25:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kabisa.nl\/wp-content\/uploads\/2025\/04\/The-React-Compiler.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1536\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Matthijs Groen\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Matthijs Groen\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"More efficient code with the React Compiler | Kabisa Software Artisans","description":"The React Compiler, is a build-time tool designed to automatically optimize React applications by handling memoization and reducing unnecessary re-renders. This compiler, formerly known as React Forget, was first introduced at React Conf in 2021.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kabisa.nl\/en\/insights\/more-efficient-code-with-the-react-compiler\/","og_locale":"en_US","og_type":"article","og_title":"More efficient code with the React Compiler | Kabisa Software Artisans","og_description":"The React Compiler, is a build-time tool designed to automatically optimize React applications by handling memoization and reducing unnecessary re-renders. This compiler, formerly known as React Forget, was first introduced at React Conf in 2021.","og_url":"https:\/\/kabisa.nl\/en\/insights\/more-efficient-code-with-the-react-compiler\/","og_site_name":"Kabisa Software Artisans","article_publisher":"https:\/\/www.facebook.com\/kabisaict","article_published_time":"2025-04-04T10:21:57+00:00","article_modified_time":"2025-04-04T10:25:25+00:00","og_image":[{"width":1536,"height":1024,"url":"https:\/\/kabisa.nl\/wp-content\/uploads\/2025\/04\/The-React-Compiler.png","type":"image\/png"}],"author":"Matthijs Groen","twitter_misc":{"Written by":"Matthijs Groen","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kabisa.nl\/en\/insights\/more-efficient-code-with-the-react-compiler\/#article","isPartOf":{"@id":"https:\/\/kabisa.nl\/en\/insights\/more-efficient-code-with-the-react-compiler\/"},"author":{"name":"Matthijs Groen","@id":"https:\/\/kabisa.nl\/en\/#\/schema\/person\/26bfc7d2180be651ae6e406c91401f41"},"headline":"More efficient code with the React Compiler","datePublished":"2025-04-04T10:21:57+00:00","dateModified":"2025-04-04T10:25:25+00:00","mainEntityOfPage":{"@id":"https:\/\/kabisa.nl\/en\/insights\/more-efficient-code-with-the-react-compiler\/"},"wordCount":561,"commentCount":0,"publisher":{"@id":"https:\/\/kabisa.nl\/en\/#organization"},"image":{"@id":"https:\/\/kabisa.nl\/en\/insights\/more-efficient-code-with-the-react-compiler\/#primaryimage"},"thumbnailUrl":"https:\/\/kabisa.nl\/wp-content\/uploads\/2025\/04\/The-React-Compiler.png","articleSection":["Tech blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kabisa.nl\/en\/insights\/more-efficient-code-with-the-react-compiler\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kabisa.nl\/en\/insights\/more-efficient-code-with-the-react-compiler\/","url":"https:\/\/kabisa.nl\/en\/insights\/more-efficient-code-with-the-react-compiler\/","name":"More efficient code with the React Compiler | Kabisa Software Artisans","isPartOf":{"@id":"https:\/\/kabisa.nl\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kabisa.nl\/en\/insights\/more-efficient-code-with-the-react-compiler\/#primaryimage"},"image":{"@id":"https:\/\/kabisa.nl\/en\/insights\/more-efficient-code-with-the-react-compiler\/#primaryimage"},"thumbnailUrl":"https:\/\/kabisa.nl\/wp-content\/uploads\/2025\/04\/The-React-Compiler.png","datePublished":"2025-04-04T10:21:57+00:00","dateModified":"2025-04-04T10:25:25+00:00","description":"The React Compiler, is a build-time tool designed to automatically optimize React applications by handling memoization and reducing unnecessary re-renders. This compiler, formerly known as React Forget, was first introduced at React Conf in 2021.","breadcrumb":{"@id":"https:\/\/kabisa.nl\/en\/insights\/more-efficient-code-with-the-react-compiler\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kabisa.nl\/en\/insights\/more-efficient-code-with-the-react-compiler\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/kabisa.nl\/en\/insights\/more-efficient-code-with-the-react-compiler\/#primaryimage","url":"https:\/\/kabisa.nl\/wp-content\/uploads\/2025\/04\/The-React-Compiler.png","contentUrl":"https:\/\/kabisa.nl\/wp-content\/uploads\/2025\/04\/The-React-Compiler.png","width":1536,"height":1024,"caption":"The React Compiler"},{"@type":"BreadcrumbList","@id":"https:\/\/kabisa.nl\/en\/insights\/more-efficient-code-with-the-react-compiler\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kabisa.nl\/en\/"},{"@type":"ListItem","position":2,"name":"Insights","item":"https:\/\/kabisa.nl\/en\/insights\/"},{"@type":"ListItem","position":3,"name":"More efficient code with the React Compiler"}]},{"@type":"WebSite","@id":"https:\/\/kabisa.nl\/en\/#website","url":"https:\/\/kabisa.nl\/en\/","name":"Kabisa Software Artisans","description":"Mission-critical Software for Hightech, Fintech & E-commerce","publisher":{"@id":"https:\/\/kabisa.nl\/en\/#organization"},"alternateName":"Kabisa","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kabisa.nl\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/kabisa.nl\/en\/#organization","name":"Cloud Legends","alternateName":"Kabisa","url":"https:\/\/kabisa.nl\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/kabisa.nl\/en\/#\/schema\/logo\/image\/","url":"https:\/\/kabisa.nl\/wp-content\/uploads\/2022\/12\/kabisa-favicon.png","contentUrl":"https:\/\/kabisa.nl\/wp-content\/uploads\/2022\/12\/kabisa-favicon.png","width":512,"height":512,"caption":"Cloud Legends"},"image":{"@id":"https:\/\/kabisa.nl\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kabisaict","https:\/\/x.com\/kabisasoftware"],"description":"Software Development is onze core-business. Kabisa ontwikkelt innovatieve maatwerk software die naadloos aansluit bij de behoeftes van klanten en eindgebruikers. Dat doen we in nauwe samenwerking in elke fase van het proces: co-creatie noemen we dat.","email":"info@kabisa.nl","telephone":"0495 430 798","legalName":"Kabisa B.V.","foundingDate":"2006-01-01","numberOfEmployees":{"@type":"QuantitativeValue","minValue":"51","maxValue":"200"}},{"@type":"Person","@id":"https:\/\/kabisa.nl\/en\/#\/schema\/person\/26bfc7d2180be651ae6e406c91401f41","name":"Matthijs Groen","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/991e323a3492d8b217feb923ce12d6ef2567ac8447838ec09a1c70775dd2c522?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/991e323a3492d8b217feb923ce12d6ef2567ac8447838ec09a1c70775dd2c522?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/991e323a3492d8b217feb923ce12d6ef2567ac8447838ec09a1c70775dd2c522?s=96&d=mm&r=g","caption":"Matthijs Groen"}}]}},"_links":{"self":[{"href":"https:\/\/kabisa.nl\/en\/wp-json\/wp\/v2\/posts\/9362","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kabisa.nl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kabisa.nl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kabisa.nl\/en\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/kabisa.nl\/en\/wp-json\/wp\/v2\/comments?post=9362"}],"version-history":[{"count":8,"href":"https:\/\/kabisa.nl\/en\/wp-json\/wp\/v2\/posts\/9362\/revisions"}],"predecessor-version":[{"id":9382,"href":"https:\/\/kabisa.nl\/en\/wp-json\/wp\/v2\/posts\/9362\/revisions\/9382"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kabisa.nl\/en\/wp-json\/wp\/v2\/media\/9359"}],"wp:attachment":[{"href":"https:\/\/kabisa.nl\/en\/wp-json\/wp\/v2\/media?parent=9362"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kabisa.nl\/en\/wp-json\/wp\/v2\/categories?post=9362"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kabisa.nl\/en\/wp-json\/wp\/v2\/tags?post=9362"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}