{"id":192,"date":"2026-10-31T13:09:32","date_gmt":"2026-10-31T13:09:32","guid":{"rendered":"https:\/\/devdojo.co.in\/?p=192"},"modified":"2026-10-31T13:09:33","modified_gmt":"2026-10-31T13:09:33","slug":"react-compiler-tutorial","status":"publish","type":"post","link":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/31\/react-compiler-tutorial\/","title":{"rendered":"React Compiler Tutorial: Stop Writing useMemo and useCallback"},"content":{"rendered":"\n<div class=\"dd-post\">\n<style>\n.single article:has(.dd-hero) .entry-media{display:none}\n.dd-post{--dd-navy:#0b1020;--dd-blue:#3178c6;--dd-violet:#7c5cff;--dd-ink:#1d2333;--dd-muted:#5b6478;--dd-line:#e3e7f0;--dd-soft:#f5f7fc;line-height:1.75;color:var(--dd-ink)}\n.dd-post h2{margin-top:2.2em;scroll-margin-top:90px}\n.dd-post h3{margin-top:1.6em;scroll-margin-top:90px}\n.dd-post a{color:var(--dd-blue)}\n.dd-post .dd-hero{margin:0 0 1.8em;border-radius:16px;overflow:hidden;box-shadow:0 12px 40px rgba(11,16,32,.35)}\n.dd-post .dd-hero svg{display:block;width:100%;height:auto}\n.dd-post .dd-hero .node{transition:transform .25s ease,filter .25s ease;transform-box:fill-box;transform-origin:center;cursor:default}\n.dd-post .dd-hero .node:hover{transform:scale(1.07);filter:drop-shadow(0 0 14px rgba(124,92,255,.85))}\n.dd-post .dd-hero .node:hover rect{stroke:#ffffff}\n.dd-post pre{background:#0f1430 !important;color:#e6e9f5 !important;border-radius:12px;padding:18px 20px;overflow-x:auto;border:1px solid #232a52;font-size:14.5px !important;line-height:1.6;margin:1.2em 0}\n.dd-post pre code{font-size:1em !important;background:none !important;color:inherit !important;padding:0 !important;font-family:\"JetBrains Mono\",\"Fira Code\",Consolas,Menlo,monospace;white-space:pre}\n.dd-post :not(pre)>code{background:#eef1fb;color:#3b2fb0;padding:2px 6px;border-radius:5px;font-size:.92em}\n.dd-post .dd-file{display:inline-block;background:#232a52;color:#c9d1ff;font:600 12.5px\/1 Consolas,Menlo,monospace;padding:7px 12px;border-radius:8px 8px 0 0;margin:1.2em 0 -1.2em 0;position:relative;z-index:1}\n.dd-post .dd-file + pre{border-top-left-radius:0}\n.dd-post .dd-summary{background:linear-gradient(135deg,#f3f0ff,#eaf3ff);border:1px solid #d9d2ff;border-left:5px solid var(--dd-violet);border-radius:12px;padding:18px 22px;margin:1.4em 0}\n.dd-post .dd-summary strong.dd-label{display:block;color:var(--dd-violet);text-transform:uppercase;letter-spacing:.06em;font-size:.82em;margin-bottom:6px}\n.dd-post .dd-summary ul{margin:.3em 0 0 1.1em;padding:0}\n.dd-post .dd-toc{background:var(--dd-soft);border:1px solid var(--dd-line);border-radius:12px;padding:16px 22px;margin:1.4em 0}\n.dd-post .dd-toc strong{display:block;margin-bottom:6px}\n.dd-post .dd-toc ol{margin:0 0 0 1.2em;padding:0;columns:2;column-gap:32px}\n.dd-post .dd-toc li{margin:.2em 0;break-inside:avoid}\n.dd-post .dd-tip,.dd-post .dd-note,.dd-post .dd-warn{border-radius:10px;padding:14px 18px;margin:1.3em 0}\n.dd-post .dd-tip{background:#ecfdf3;border-left:5px solid #16a34a}\n.dd-post .dd-note{background:#eef5ff;border-left:5px solid var(--dd-blue)}\n.dd-post .dd-warn{background:#fff7e8;border-left:5px solid #f59e0b}\n.dd-post .dd-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:1.3em 0}\n.dd-post .dd-card{background:#fff;border:1px solid var(--dd-line);border-radius:12px;padding:16px 18px;box-shadow:0 2px 10px rgba(20,30,70,.05)}\n.dd-post .dd-card b{display:block;color:var(--dd-violet);margin-bottom:4px}\n.dd-post table{width:100%;border-collapse:collapse;margin:1.3em 0;font-size:.95em}\n.dd-post th{background:#151b3b;color:#fff;text-align:left;padding:10px 12px}\n.dd-post td{border-bottom:1px solid var(--dd-line);padding:10px 12px;vertical-align:top}\n.dd-post tr:nth-child(even) td{background:#f8f9fd}\n.dd-post .dd-table-wrap{overflow-x:auto}\n.dd-post figure{margin:1.6em 0;text-align:center}\n.dd-post figure svg{width:100%;height:auto;max-width:900px;border-radius:12px}\n.dd-post figcaption{font-size:.9em;color:var(--dd-muted);margin-top:8px}\n.dd-post details{border:1px solid var(--dd-line);border-radius:10px;padding:12px 16px;margin:.7em 0;background:#fff}\n.dd-post details summary{cursor:pointer;font-weight:600}\n.dd-post details[open] summary{color:var(--dd-violet);margin-bottom:6px}\n.dd-post .dd-tabs{margin:1.4em 0;border:1px solid var(--dd-line);border-radius:12px;overflow:hidden;background:#fff}\n.dd-post .dd-tabs input{position:absolute;opacity:0;pointer-events:none}\n.dd-post .dd-tabs .dd-tab-labels{display:flex;flex-wrap:wrap;background:#151b3b}\n.dd-post .dd-tabs label{flex:1 1 auto;text-align:center;padding:12px 14px;color:#b9c2e8;cursor:pointer;font-weight:600;font-size:.95em;border-bottom:3px solid transparent;margin:0}\n.dd-post .dd-tabs label:hover{color:#fff}\n.dd-post .dd-tab-panel{display:none;padding:6px 18px 14px}\n.dd-post #dd-t1:checked ~ .dd-tab-labels label[for=\"dd-t1\"],.dd-post #dd-t2:checked ~ .dd-tab-labels label[for=\"dd-t2\"],.dd-post #dd-t3:checked ~ .dd-tab-labels label[for=\"dd-t3\"]{color:#fff;border-bottom-color:#7c5cff;background:#1f2752}\n.dd-post #dd-t1:checked ~ .dd-p1,.dd-post #dd-t2:checked ~ .dd-p2,.dd-post #dd-t3:checked ~ .dd-p3{display:block}\n.dd-post .dd-cta{background:linear-gradient(135deg,#0b1020,#151b3b);color:#e6e9f5;border-radius:16px;padding:26px 28px;margin:2em 0;text-align:center}\n.dd-post .dd-cta h3{color:#fff;margin:0 0 8px}\n.dd-post .dd-cta a{color:#a8b8ff;font-weight:600}\n@media (max-width:640px){.dd-post .dd-toc ol{columns:1}}\n<\/style>\n\n<div class=\"dd-hero\">\n<svg viewBox=\"0 0 1200 520\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-labelledby=\"ddHeroTitle ddHeroDesc\">\n<title id=\"ddHeroTitle\">React Compiler Tutorial<\/title>\n<desc id=\"ddHeroDesc\">Banner showing your React code flowing through the React Compiler and coming out as an automatically memoized app, with data dots moving between the stages.<\/desc>\n<defs>\n<linearGradient id=\"ddBg\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\"><stop offset=\"0\" stop-color=\"#0b1020\"\/><stop offset=\"1\" stop-color=\"#151b3b\"\/><\/linearGradient>\n<linearGradient id=\"ddAcc\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\"><stop offset=\"0\" stop-color=\"#3178c6\"\/><stop offset=\"1\" stop-color=\"#7c5cff\"\/><\/linearGradient>\n<pattern id=\"ddGrid\" width=\"40\" height=\"40\" patternUnits=\"userSpaceOnUse\"><path d=\"M40 0H0V40\" fill=\"none\" stroke=\"#ffffff\" stroke-opacity=\".04\"\/><\/pattern>\n<\/defs>\n<rect x=\"0\" y=\"-60\" width=\"1200\" height=\"640\" fill=\"url(#ddBg)\"\/>\n<rect x=\"0\" y=\"-60\" width=\"1200\" height=\"640\" fill=\"url(#ddGrid)\"\/>\n<circle cx=\"1080\" cy=\"40\" r=\"180\" fill=\"#7c5cff\" opacity=\".10\"\/>\n<circle cx=\"120\" cy=\"500\" r=\"160\" fill=\"#3178c6\" opacity=\".10\"\/>\n<g transform=\"translate(1050 130)\" opacity=\".85\">\n<ellipse rx=\"70\" ry=\"26\" fill=\"none\" stroke=\"#61dafb\" stroke-width=\"3\"\/>\n<ellipse rx=\"70\" ry=\"26\" fill=\"none\" stroke=\"#61dafb\" stroke-width=\"3\" transform=\"rotate(60)\"\/>\n<ellipse rx=\"70\" ry=\"26\" fill=\"none\" stroke=\"#61dafb\" stroke-width=\"3\" transform=\"rotate(120)\"\/>\n<circle r=\"10\" fill=\"#61dafb\"\/>\n<\/g>\n<text x=\"70\" y=\"110\" fill=\"#8fa2ff\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"20\" font-weight=\"700\" letter-spacing=\"3\">DEVDOJO \u00b7 FRONTEND<\/text>\n<text x=\"70\" y=\"172\" fill=\"#ffffff\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"54\" font-weight=\"800\">React Compiler Tutorial<\/text>\n<text x=\"70\" y=\"218\" fill=\"#c6cdf0\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"25\">Automatic memoization: stop writing useMemo &amp; useCallback<\/text>\n<rect x=\"70\" y=\"240\" width=\"250\" height=\"5\" rx=\"2.5\" fill=\"url(#ddAcc)\"\/>\n<path id=\"ddP1\" d=\"M330 390 C 400 340, 440 340, 500 390\" fill=\"none\" stroke=\"#3a4685\" stroke-width=\"2\"\/>\n<path id=\"ddP2\" d=\"M720 390 C 790 440, 830 440, 890 390\" fill=\"none\" stroke=\"#3a4685\" stroke-width=\"2\"\/>\n<circle r=\"7\" fill=\"#7c5cff\"><animateMotion dur=\"2.4s\" repeatCount=\"indefinite\"><mpath href=\"#ddP1\"\/><\/animateMotion><\/circle>\n<circle r=\"6\" fill=\"#3178c6\"><animateMotion dur=\"2.4s\" begin=\"1.2s\" repeatCount=\"indefinite\"><mpath href=\"#ddP1\"\/><\/animateMotion><\/circle>\n<circle r=\"7\" fill=\"#28c840\"><animateMotion dur=\"2.2s\" repeatCount=\"indefinite\"><mpath href=\"#ddP2\"\/><\/animateMotion><\/circle>\n<circle r=\"6\" fill=\"#61dafb\"><animateMotion dur=\"2.2s\" begin=\"1.1s\" repeatCount=\"indefinite\"><mpath href=\"#ddP2\"\/><\/animateMotion><\/circle>\n<g class=\"node\"><rect x=\"70\" y=\"320\" width=\"260\" height=\"140\" rx=\"16\" fill=\"#0f1430\" stroke=\"#3178c6\" stroke-width=\"2\"\/>\n<text x=\"200\" y=\"358\" text-anchor=\"middle\" fill=\"#ffffff\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"22\" font-weight=\"700\">Your Code<\/text>\n<text x=\"94\" y=\"396\" fill=\"#9aa5cf\" font-family=\"Consolas,Menlo,monospace\" font-size=\"16\">function List() {<\/text>\n<text x=\"110\" y=\"420\" fill=\"#ff8fb1\" font-family=\"Consolas,Menlo,monospace\" font-size=\"16\">\/\/ no useMemo<\/text>\n<text x=\"94\" y=\"444\" fill=\"#9aa5cf\" font-family=\"Consolas,Menlo,monospace\" font-size=\"16\">}<\/text><\/g>\n<g class=\"node\"><rect x=\"500\" y=\"330\" width=\"220\" height=\"120\" rx=\"16\" fill=\"#1b1a4a\" stroke=\"#7c5cff\" stroke-width=\"2\"\/>\n<text x=\"610\" y=\"378\" text-anchor=\"middle\" fill=\"#ffffff\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"23\" font-weight=\"800\">React Compiler<\/text>\n<text x=\"610\" y=\"408\" text-anchor=\"middle\" fill=\"#b9a8ff\" font-family=\"Consolas,Menlo,monospace\" font-size=\"16\">build time \u2728<\/text><\/g>\n<g class=\"node\"><rect x=\"890\" y=\"320\" width=\"250\" height=\"140\" rx=\"16\" fill=\"#0f2a2a\" stroke=\"#28c840\" stroke-width=\"2\"\/>\n<text x=\"1015\" y=\"358\" text-anchor=\"middle\" fill=\"#ffffff\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"22\" font-weight=\"700\">Optimized App<\/text>\n<text x=\"1015\" y=\"396\" text-anchor=\"middle\" fill=\"#9be7a8\" font-family=\"Consolas,Menlo,monospace\" font-size=\"16\">auto memo cache<\/text>\n<text x=\"1015\" y=\"424\" text-anchor=\"middle\" fill=\"#9be7a8\" font-family=\"Consolas,Menlo,monospace\" font-size=\"16\">fewer re-renders<\/text><\/g>\n<\/svg>\n<\/div>\n\n<p>Every React developer has written code like <code>useMemo(() =&gt; ..., [a, b])<\/code> or <code>useCallback(fn, [])<\/code> and wondered, &#8220;Do I really need this here?&#8221; The <strong>React Compiler<\/strong> answers that question for you. It is a build-time tool that reads your components and adds memoization automatically, so your app skips unnecessary re-renders without you sprinkling <code>useMemo<\/code>, <code>useCallback<\/code> and <code>React.memo<\/code> everywhere.<\/p>\n<p>In this React Compiler tutorial, you will learn what the compiler does, how to set it up in Vite, Next.js and plain Babel projects, how to check that it is working, which coding rules it expects, and how to roll it out safely in an existing project.<\/p>\n\n<div class=\"dd-summary\">\n<strong class=\"dd-label\">Quick Summary<\/strong>\n<ul>\n<li>React Compiler is a <strong>build-time<\/strong> tool (a Babel plugin) that automatically memoizes components, values and functions.<\/li>\n<li>Version 1.0 is stable and is used in production at Meta. It works best with React 19, and also supports React 17 and 18.<\/li>\n<li>Setup is one package (<code>babel-plugin-react-compiler<\/code>) plus one config change. In Next.js 16 it is just <code>reactCompiler: true<\/code>.<\/li>\n<li>Your code must follow the Rules of React (pure render, no mutating props or state). The ESLint plugin <code>eslint-plugin-react-hooks<\/code> warns you when it doesn&#8217;t.<\/li>\n<li>For new code, skip <code>useMemo<\/code> and <code>useCallback<\/code>. For old code, leave existing memoization in place unless you test carefully.<\/li>\n<\/ul>\n<\/div>\n\n<nav class=\"dd-toc\" aria-label=\"Table of contents\">\n<strong>Table of Contents<\/strong>\n<ol>\n<li><a href=\"#what-is-react-compiler\">What Is the React Compiler?<\/a><\/li>\n<li><a href=\"#why-memoization\">Why Manual Memoization Is Painful<\/a><\/li>\n<li><a href=\"#how-it-works\">How the React Compiler Works<\/a><\/li>\n<li><a href=\"#setup\">How to Set Up React Compiler<\/a><\/li>\n<li><a href=\"#before-after\">Before and After: A Real Example<\/a><\/li>\n<li><a href=\"#verify\">How to Check It Is Working<\/a><\/li>\n<li><a href=\"#rules\">Rules Your Code Must Follow<\/a><\/li>\n<li><a href=\"#eslint\">Catch Problems Early with ESLint<\/a><\/li>\n<li><a href=\"#adopt\">Adopting It in an Existing App<\/a><\/li>\n<li><a href=\"#errors\">Common Errors and Fixes<\/a><\/li>\n<li><a href=\"#best-practices\">Best Practices<\/a><\/li>\n<li><a href=\"#faq\">FAQ<\/a><\/li>\n<li><a href=\"#conclusion\">Conclusion<\/a><\/li>\n<\/ol>\n<\/nav>\n<\/div>\n\n\n\n<div class=\"dd-post\">\n<h2 id=\"what-is-react-compiler\">What Is the React Compiler?<\/h2>\n<p>The React Compiler is an optimizing compiler built by the React team at Meta. It runs while your app is being <em>built<\/em> (not in the browser), looks at each component and custom hook, and rewrites it so that values and JSX are only recalculated when their inputs actually change.<\/p>\n<p>The React team released <a href=\"https:\/\/react.dev\/blog\/2025\/10\/07\/react-compiler-1\" target=\"_blank\" rel=\"noopener\">React Compiler v1.0<\/a> as stable in October 2025. Meta had already been running it in production \u2014 on the Meta Quest Store they reported up to 12% faster initial loads and page navigations, and some interactions becoming more than 2.5\u00d7 faster, with no increase in memory use.<\/p>\n\n<div class=\"dd-cards\">\n<div class=\"dd-card\"><b>Build time, not run time<\/b>It is a Babel plugin. Your bundler runs it once while building; users just get faster JavaScript.<\/div>\n<div class=\"dd-card\"><b>No new API to learn<\/b>You write normal components. The compiler adds the caching code for you.<\/div>\n<div class=\"dd-card\"><b>Works with React 17+<\/b>React 19 works out of the box. React 17 and 18 need one extra setting and a small runtime package.<\/div>\n<div class=\"dd-card\"><b>Safe by default<\/b>If the compiler is not sure a component is safe to optimize, it simply skips it.<\/div>\n<\/div>\n\n<h2 id=\"why-memoization\">Why Manual Memoization Is Painful<\/h2>\n<p>In React, when a parent component re-renders, all its children re-render too by default. Usually that is fine. But in large lists, dashboards or forms it can make the UI feel slow. Until now, the fix was <strong>manual memoization<\/strong>:<\/p>\n<ul>\n<li><code>React.memo<\/code> \u2014 skip re-rendering a child if its props did not change.<\/li>\n<li><code>useMemo<\/code> \u2014 remember the result of an expensive calculation.<\/li>\n<li><code>useCallback<\/code> \u2014 keep the same function reference between renders, so a memoized child doesn&#8217;t re-render.<\/li>\n<\/ul>\n<p>The problem is that these tools are easy to get wrong. Forget one item in a dependency array and you get stale data. Pass a new inline object to a memoized child and all your <code>React.memo<\/code> work is wasted. Add them everywhere &#8220;just in case&#8221; and your code becomes hard to read. If you have struggled with dependency arrays before, our guide on <a href=\"https:\/\/devdojo.co.in\/index.php\/2024\/04\/02\/useeffect-the-most-powerful-react-hook\/\">the useEffect hook<\/a> explains why they matter so much.<\/p>\n\n<figure>\n<svg viewBox=\"0 0 900 380\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-labelledby=\"ddF1t ddF1d\">\n<title id=\"ddF1t\">Re-renders without and with React Compiler<\/title>\n<desc id=\"ddF1d\">Two component trees. On the left, without the compiler, a state change in App re-renders every child. On the right, with the compiler, only the component that uses the changed state re-renders.<\/desc>\n<rect width=\"900\" height=\"380\" fill=\"#0f1430\"\/>\n<text x=\"225\" y=\"40\" text-anchor=\"middle\" fill=\"#ffffff\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"20\" font-weight=\"700\">Without compiler<\/text>\n<text x=\"675\" y=\"40\" text-anchor=\"middle\" fill=\"#ffffff\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"20\" font-weight=\"700\">With React Compiler<\/text>\n<line x1=\"450\" y1=\"20\" x2=\"450\" y2=\"360\" stroke=\"#2a3366\" stroke-dasharray=\"6 6\"\/>\n<g stroke=\"#3a4685\" stroke-width=\"2\"><line x1=\"225\" y1=\"105\" x2=\"115\" y2=\"185\"\/><line x1=\"225\" y1=\"105\" x2=\"335\" y2=\"185\"\/><line x1=\"115\" y1=\"215\" x2=\"70\" y2=\"285\"\/><line x1=\"115\" y1=\"215\" x2=\"160\" y2=\"285\"\/><line x1=\"335\" y1=\"215\" x2=\"335\" y2=\"285\"\/>\n<line x1=\"675\" y1=\"105\" x2=\"565\" y2=\"185\"\/><line x1=\"675\" y1=\"105\" x2=\"785\" y2=\"185\"\/><line x1=\"565\" y1=\"215\" x2=\"520\" y2=\"285\"\/><line x1=\"565\" y1=\"215\" x2=\"610\" y2=\"285\"\/><line x1=\"785\" y1=\"215\" x2=\"785\" y2=\"285\"\/><\/g>\n<g font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"15\" text-anchor=\"middle\" fill=\"#ffffff\">\n<rect x=\"175\" y=\"75\" width=\"100\" height=\"34\" rx=\"9\" fill=\"#7a2848\" stroke=\"#ff6b9a\"\/><text x=\"225\" y=\"98\">App<\/text>\n<rect x=\"65\" y=\"185\" width=\"100\" height=\"34\" rx=\"9\" fill=\"#7a2848\" stroke=\"#ff6b9a\"\/><text x=\"115\" y=\"208\">SearchBox<\/text>\n<rect x=\"285\" y=\"185\" width=\"100\" height=\"34\" rx=\"9\" fill=\"#7a2848\" stroke=\"#ff6b9a\"\/><text x=\"335\" y=\"208\">Sidebar<\/text>\n<rect x=\"25\" y=\"285\" width=\"90\" height=\"34\" rx=\"9\" fill=\"#7a2848\" stroke=\"#ff6b9a\"\/><text x=\"70\" y=\"308\">Input<\/text>\n<rect x=\"115\" y=\"285\" width=\"90\" height=\"34\" rx=\"9\" fill=\"#7a2848\" stroke=\"#ff6b9a\"\/><text x=\"160\" y=\"308\">Results<\/text>\n<rect x=\"290\" y=\"285\" width=\"90\" height=\"34\" rx=\"9\" fill=\"#7a2848\" stroke=\"#ff6b9a\"\/><text x=\"335\" y=\"308\">Menu<\/text>\n<rect x=\"625\" y=\"75\" width=\"100\" height=\"34\" rx=\"9\" fill=\"#7a2848\" stroke=\"#ff6b9a\"\/><text x=\"675\" y=\"98\">App<\/text>\n<rect x=\"515\" y=\"185\" width=\"100\" height=\"34\" rx=\"9\" fill=\"#7a2848\" stroke=\"#ff6b9a\"\/><text x=\"565\" y=\"208\">SearchBox<\/text>\n<rect x=\"735\" y=\"185\" width=\"100\" height=\"34\" rx=\"9\" fill=\"#173a2a\" stroke=\"#28c840\"\/><text x=\"785\" y=\"208\">Sidebar<\/text>\n<rect x=\"475\" y=\"285\" width=\"90\" height=\"34\" rx=\"9\" fill=\"#7a2848\" stroke=\"#ff6b9a\"\/><text x=\"520\" y=\"308\">Input<\/text>\n<rect x=\"565\" y=\"285\" width=\"90\" height=\"34\" rx=\"9\" fill=\"#7a2848\" stroke=\"#ff6b9a\"\/><text x=\"610\" y=\"308\">Results<\/text>\n<rect x=\"740\" y=\"285\" width=\"90\" height=\"34\" rx=\"9\" fill=\"#173a2a\" stroke=\"#28c840\"\/><text x=\"785\" y=\"308\">Menu<\/text>\n<\/g>\n<g font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"14\" fill=\"#c6cdf0\"><rect x=\"250\" y=\"345\" width=\"14\" height=\"14\" rx=\"3\" fill=\"#7a2848\" stroke=\"#ff6b9a\"\/><text x=\"270\" y=\"357\">re-renders<\/text><rect x=\"400\" y=\"345\" width=\"14\" height=\"14\" rx=\"3\" fill=\"#173a2a\" stroke=\"#28c840\"\/><text x=\"420\" y=\"357\">skipped (cached)<\/text><\/g>\n<\/svg>\n<figcaption>When the search query in <code>App<\/code> changes, only the parts that use it need to re-render. The compiler caches the rest for you.<\/figcaption>\n<\/figure>\n\n<h2 id=\"how-it-works\">How the React Compiler Works<\/h2>\n<p>The compiler reads your component like a very careful code reviewer. It figures out which values depend on which props and state, and then wraps each piece in a small cache. On the next render, if the inputs are the same, React reuses the cached value instead of recalculating it.<\/p>\n<p>Here is a tiny component and a <em>simplified<\/em> version of what the compiler turns it into:<\/p>\n<div class=\"dd-file\">Greeting.jsx (your code)<\/div>\n<pre><code>export function Greeting({ name }) {\n  return &lt;h1&gt;Hello, {name}!&lt;\/h1&gt;;\n}<\/code><\/pre>\n<div class=\"dd-file\">Greeting.js (compiled, simplified)<\/div>\n<pre><code>import { c as _c } from \"react\/compiler-runtime\";\n\nexport function Greeting(t0) {\n  const $ = _c(2);          \/\/ a cache with 2 slots for this component\n  const { name } = t0;\n  let t1;\n  if ($[0] !== name) {      \/\/ did \"name\" change since last render?\n    t1 = &lt;h1&gt;Hello, {name}!&lt;\/h1&gt;;\n    $[0] = name;\n    $[1] = t1;\n  } else {\n    t1 = $[1];              \/\/ reuse the cached JSX\n  }\n  return t1;\n}<\/code><\/pre>\n<p>You never write or read this output yourself \u2014 it is just useful to know what is going on. Because the cached JSX is the <em>same object<\/em> as last time, React knows it can skip that part of the tree.<\/p>\n\n<div class=\"dd-note\"><strong>Smarter than manual hooks:<\/strong> the compiler can memoize code that comes <em>after<\/em> an early <code>return<\/code>. You cannot do that with <code>useMemo<\/code>, because hooks are not allowed after a conditional return.<\/div>\n\n<pre><code>function Report({ user, rows }) {\n  if (!user) return &lt;p&gt;Please sign in.&lt;\/p&gt;;\n\n  \/\/ The compiler caches this calculation even though it is\n  \/\/ after an early return. A useMemo here would break the Rules of Hooks.\n  const total = rows.reduce((sum, row) =&gt; sum + row.amount, 0);\n\n  return &lt;Summary total={total} rows={rows} \/&gt;;\n}<\/code><\/pre>\n\n<figure>\n<svg viewBox=\"0 0 900 230\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-labelledby=\"ddF2t ddF2d\">\n<title id=\"ddF2t\">React Compiler build pipeline<\/title>\n<desc id=\"ddF2d\">Four steps from left to right: your JSX and TypeScript source, the bundler running Babel with the React Compiler plugin, compiled JavaScript with a memo cache, and the browser rendering fewer updates.<\/desc>\n<defs><marker id=\"ddArr\" viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\" markerWidth=\"8\" markerHeight=\"8\" orient=\"auto\"><path d=\"M0 0L10 5L0 10z\" fill=\"#7c5cff\"\/><\/marker><\/defs>\n<rect width=\"900\" height=\"230\" fill=\"#0f1430\"\/>\n<g font-family=\"Segoe UI,Arial,sans-serif\" text-anchor=\"middle\">\n<rect x=\"20\" y=\"60\" width=\"180\" height=\"100\" rx=\"14\" fill=\"#16204a\" stroke=\"#3178c6\" stroke-width=\"2\"\/><text x=\"110\" y=\"100\" fill=\"#fff\" font-size=\"18\" font-weight=\"700\">1. Source<\/text><text x=\"110\" y=\"128\" fill=\"#9aa5cf\" font-size=\"14\">.jsx \/ .tsx files<\/text>\n<rect x=\"245\" y=\"60\" width=\"180\" height=\"100\" rx=\"14\" fill=\"#1b1a4a\" stroke=\"#7c5cff\" stroke-width=\"2\"\/><text x=\"335\" y=\"100\" fill=\"#fff\" font-size=\"18\" font-weight=\"700\">2. Bundler<\/text><text x=\"335\" y=\"128\" fill=\"#9aa5cf\" font-size=\"14\">Vite \/ Next.js + compiler<\/text>\n<rect x=\"470\" y=\"60\" width=\"180\" height=\"100\" rx=\"14\" fill=\"#1b1a4a\" stroke=\"#7c5cff\" stroke-width=\"2\"\/><text x=\"560\" y=\"100\" fill=\"#fff\" font-size=\"18\" font-weight=\"700\">3. Output<\/text><text x=\"560\" y=\"128\" fill=\"#9aa5cf\" font-size=\"14\">JS with memo cache<\/text>\n<rect x=\"695\" y=\"60\" width=\"185\" height=\"100\" rx=\"14\" fill=\"#0f2a2a\" stroke=\"#28c840\" stroke-width=\"2\"\/><text x=\"787\" y=\"100\" fill=\"#fff\" font-size=\"18\" font-weight=\"700\">4. Browser<\/text><text x=\"787\" y=\"128\" fill=\"#9be7a8\" font-size=\"14\">fewer re-renders<\/text>\n<\/g>\n<g stroke=\"#7c5cff\" stroke-width=\"2.5\" marker-end=\"url(#ddArr)\"><line x1=\"202\" y1=\"110\" x2=\"240\" y2=\"110\"\/><line x1=\"427\" y1=\"110\" x2=\"465\" y2=\"110\"\/><line x1=\"652\" y1=\"110\" x2=\"690\" y2=\"110\"\/><\/g>\n<text x=\"450\" y=\"205\" text-anchor=\"middle\" fill=\"#8fa2ff\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"15\">All the work happens in steps 2\u20133, before your code reaches users.<\/text>\n<\/svg>\n<figcaption>The React Compiler runs inside your build step. Users only download the already-optimized JavaScript.<\/figcaption>\n<\/figure>\n<\/div>\n\n\n\n<div class=\"dd-post\">\n<h2 id=\"setup\">How to Set Up React Compiler<\/h2>\n<p>The setup depends on your tool. Pick your tab below. All three use the same package, <code>babel-plugin-react-compiler<\/code>, from the <a href=\"https:\/\/react.dev\/learn\/react-compiler\/installation\" target=\"_blank\" rel=\"noopener\">official installation guide<\/a>.<\/p>\n\n<div class=\"dd-tabs\">\n<input type=\"radio\" name=\"dd-setup\" id=\"dd-t1\" checked>\n<input type=\"radio\" name=\"dd-setup\" id=\"dd-t2\">\n<input type=\"radio\" name=\"dd-setup\" id=\"dd-t3\">\n<div class=\"dd-tab-labels\"><label for=\"dd-t1\">Vite<\/label><label for=\"dd-t2\">Next.js<\/label><label for=\"dd-t3\">Babel \/ Other<\/label><\/div>\n\n<div class=\"dd-tab-panel dd-p1\">\n<p><strong>Vite with <code>@vitejs\/plugin-react<\/code> 6 or newer<\/strong> (Vite 8). Version 6 of the React plugin no longer runs Babel itself, so you add the Rolldown Babel plugin and use the compiler preset:<\/p>\n<pre><code>npm install -D babel-plugin-react-compiler @rolldown\/plugin-babel<\/code><\/pre>\n<div class=\"dd-file\">vite.config.js<\/div>\n<pre><code>import { defineConfig } from 'vite';\nimport react, { reactCompilerPreset } from '@vitejs\/plugin-react';\nimport babel from '@rolldown\/plugin-babel';\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    babel({\n      presets: [reactCompilerPreset()],\n    }),\n  ],\n});<\/code><\/pre>\n<p><strong>Older <code>@vitejs\/plugin-react<\/code> (5.x and below):<\/strong> pass the plugin through the built-in <code>babel<\/code> option instead.<\/p>\n<pre><code>\/\/ vite.config.js (plugin-react 5.x or older)\nimport { defineConfig } from 'vite';\nimport react from '@vitejs\/plugin-react';\n\nexport default defineConfig({\n  plugins: [\n    react({\n      babel: {\n        plugins: ['babel-plugin-react-compiler'],\n      },\n    }),\n  ],\n});<\/code><\/pre>\n<\/div>\n\n<div class=\"dd-tab-panel dd-p2\">\n<p><strong>Next.js 16 and newer.<\/strong> The <code>reactCompiler<\/code> option is stable and lives at the top level of your config. Next.js also uses a fast SWC check so the compiler only runs on files that contain JSX or hooks.<\/p>\n<pre><code>npm install -D babel-plugin-react-compiler<\/code><\/pre>\n<div class=\"dd-file\">next.config.ts<\/div>\n<pre><code>import type { NextConfig } from 'next';\n\nconst nextConfig: NextConfig = {\n  reactCompiler: true,\n};\n\nexport default nextConfig;<\/code><\/pre>\n<p>On Next.js 15 the same option lived under <code>experimental.reactCompiler<\/code>. If you are also using caching in the App Router, see our guide to <a href=\"https:\/\/devdojo.co.in\/index.php\/2026\/10\/05\/nextjs-use-cache\/\">Next.js use cache<\/a> \u2014 the two features work well together.<\/p>\n<\/div>\n\n<div class=\"dd-tab-panel dd-p3\">\n<p><strong>Any Babel-based setup<\/strong> (custom webpack, Metro for React Native, etc.). The compiler must run <strong>first<\/strong> in the plugin list:<\/p>\n<pre><code>npm install -D babel-plugin-react-compiler<\/code><\/pre>\n<div class=\"dd-file\">babel.config.js<\/div>\n<pre><code>module.exports = {\n  plugins: [\n    'babel-plugin-react-compiler', \/\/ must run first!\n    \/\/ ...your other plugins\n  ],\n};<\/code><\/pre>\n<p><strong>Expo:<\/strong> new apps created with <code>npx create-expo-app@latest<\/code> (SDK 54 and up) already have the compiler turned on.<\/p>\n<\/div>\n<\/div>\n\n<div class=\"dd-tip\"><strong>Starting a new project?<\/strong> <code>npm create vite@latest<\/code> and <code>npx create-next-app@latest<\/code> both let you pick a template with the compiler already enabled.<\/div>\n\n<h3 id=\"react-17-18\">Using React 17 or 18<\/h3>\n<p>The compiler is designed for React 19, where the cache helper lives inside <code>react\/compiler-runtime<\/code>. On React 17 or 18, install the small runtime package as a <strong>normal dependency<\/strong> (not a dev dependency) and tell the compiler which version you use:<\/p>\n<pre><code>npm install react-compiler-runtime@latest<\/code><\/pre>\n<div class=\"dd-file\">babel.config.js<\/div>\n<pre><code>const ReactCompilerConfig = {\n  target: '18', \/\/ use '17' for React 17 \u2014 a string, major version only\n};\n\nmodule.exports = {\n  plugins: [\n    ['babel-plugin-react-compiler', ReactCompilerConfig],\n  ],\n};<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"dd-post\">\n<h2 id=\"before-after\">Before and After: A Real Example<\/h2>\n<p>Let&#8217;s look at a typical product list with a search box and an &#8220;Add to cart&#8221; button. This is how many of us wrote it before the compiler:<\/p>\n<div class=\"dd-file\">ProductList.jsx \u2014 before (manual memoization)<\/div>\n<pre><code>import { memo, useCallback, useMemo, useState } from 'react';\n\nconst ProductRow = memo(function ProductRow({ product, onAdd }) {\n  return (\n    &lt;li&gt;\n      {product.name} \u2014 \u20b9{product.price}\n      &lt;button onClick={() =&gt; onAdd(product.id)}&gt;Add&lt;\/button&gt;\n    &lt;\/li&gt;\n  );\n});\n\nexport default function ProductList({ products }) {\n  const [query, setQuery] = useState('');\n  const [cart, setCart] = useState([]);\n\n  const visible = useMemo(\n    () =&gt;\n      products.filter((p) =&gt;\n        p.name.toLowerCase().includes(query.toLowerCase())\n      ),\n    [products, query]\n  );\n\n  const handleAdd = useCallback((id) =&gt; {\n    setCart((current) =&gt; [...current, id]);\n  }, []);\n\n  return (\n    &lt;section&gt;\n      &lt;input\n        value={query}\n        onChange={(e) =&gt; setQuery(e.target.value)}\n        placeholder=\"Search products\"\n      \/&gt;\n      &lt;p&gt;Items in cart: {cart.length}&lt;\/p&gt;\n      &lt;ul&gt;\n        {visible.map((p) =&gt; (\n          &lt;ProductRow key={p.id} product={p} onAdd={handleAdd} \/&gt;\n        ))}\n      &lt;\/ul&gt;\n    &lt;\/section&gt;\n  );\n}<\/code><\/pre>\n<p>With the React Compiler turned on, you can write the same thing as plain, readable React:<\/p>\n<div class=\"dd-file\">ProductList.jsx \u2014 after (compiler handles it)<\/div>\n<pre><code>import { useState } from 'react';\n\nfunction ProductRow({ product, onAdd }) {\n  return (\n    &lt;li&gt;\n      {product.name} \u2014 \u20b9{product.price}\n      &lt;button onClick={() =&gt; onAdd(product.id)}&gt;Add&lt;\/button&gt;\n    &lt;\/li&gt;\n  );\n}\n\nexport default function ProductList({ products }) {\n  const [query, setQuery] = useState('');\n  const [cart, setCart] = useState([]);\n\n  const visible = products.filter((p) =&gt;\n    p.name.toLowerCase().includes(query.toLowerCase())\n  );\n\n  function handleAdd(id) {\n    setCart((current) =&gt; [...current, id]);\n  }\n\n  return (\n    &lt;section&gt;\n      &lt;input\n        value={query}\n        onChange={(e) =&gt; setQuery(e.target.value)}\n        placeholder=\"Search products\"\n      \/&gt;\n      &lt;p&gt;Items in cart: {cart.length}&lt;\/p&gt;\n      &lt;ul&gt;\n        {visible.map((p) =&gt; (\n          &lt;ProductRow key={p.id} product={p} onAdd={handleAdd} \/&gt;\n        ))}\n      &lt;\/ul&gt;\n    &lt;\/section&gt;\n  );\n}<\/code><\/pre>\n<p>The compiler caches <code>visible<\/code> (recalculated only when <code>products<\/code> or <code>query<\/code> change), keeps <code>handleAdd<\/code> stable, and memoizes each <code>ProductRow<\/code>&#8216;s JSX. When you click &#8220;Add&#8221;, the cart count updates but the product rows are reused from the cache.<\/p>\n\n<h3>Try it yourself<\/h3>\n<p>Add a quick log to see the difference in your own project:<\/p>\n<pre><code>function ProductRow({ product, onAdd }) {\n  console.log('render row', product.id); \/\/ remove after testing\n  \/\/ ...\n}<\/code><\/pre>\n<p>Without the compiler, every click on &#8220;Add&#8221; logs every row. With the compiler, typing in the search box only logs rows whose data actually changed, and clicking &#8220;Add&#8221; logs none.<\/p>\n\n<div class=\"dd-warn\"><strong>Note about Strict Mode:<\/strong> in development, React&#8217;s Strict Mode renders components twice on purpose. Don&#8217;t let the double logs confuse you \u2014 compare counts, or test in a production build.<\/div>\n\n<h2 id=\"verify\">How to Check It Is Working<\/h2>\n<ol>\n<li>Install the <strong>React Developer Tools<\/strong> browser extension.<\/li>\n<li>Run your app in development mode (<code>npm run dev<\/code>).<\/li>\n<li>Open the <em>Components<\/em> tab. Components optimized by the compiler show a <strong>&#8220;Memo \u2728&#8221;<\/strong> badge next to their name.<\/li>\n<\/ol>\n<p>You can also look at the built code. Compiled components import <code>c<\/code> from <code>react\/compiler-runtime<\/code> (or from <code>react-compiler-runtime<\/code> on React 17\/18) and use a <code>$<\/code> cache array, like in the example above.<\/p>\n<p>If a component has <em>no<\/em> badge, the compiler decided to skip it \u2014 usually because the code breaks one of the rules in the next section. The ESLint plugin will tell you why.<\/p>\n<\/div>\n\n\n\n<div class=\"dd-post\">\n<h2 id=\"rules\">Rules Your Code Must Follow<\/h2>\n<p>The compiler assumes your components follow the <strong>Rules of React<\/strong>. In simple words: rendering must be a pure calculation. Given the same props and state, a component should return the same JSX and should not change anything outside itself. Here are the four mistakes that most often stop the compiler.<\/p>\n\n<h3>1. Mutating props or state<\/h3>\n<pre><code>\/\/ \u274c Bad: .sort() changes the original array that came from props\nfunction TopScores({ scores }) {\n  const sorted = scores.sort((a, b) =&gt; b - a);\n  return &lt;List items={sorted} \/&gt;;\n}\n\n\/\/ \u2705 Good: make a sorted copy instead\nfunction TopScores({ scores }) {\n  const sorted = scores.toSorted((a, b) =&gt; b - a); \/\/ or [...scores].sort(...)\n  return &lt;List items={sorted} \/&gt;;\n}<\/code><\/pre>\n\n<h3>2. Reading or writing refs during render<\/h3>\n<pre><code>\/\/ \u274c Bad: ref.current is read while rendering\nfunction Timer() {\n  const startRef = useRef(Date.now());\n  return &lt;p&gt;Started at {startRef.current}&lt;\/p&gt;;\n}\n\n\/\/ \u2705 Good: store values you show on screen in state\nfunction Timer() {\n  const [startedAt] = useState(() =&gt; Date.now());\n  return &lt;p&gt;Started at {startedAt}&lt;\/p&gt;;\n}<\/code><\/pre>\n<p>Reading <code>ref.current<\/code> inside event handlers and effects is completely fine \u2014 just not in the render body.<\/p>\n\n<h3>3. Impure values during render<\/h3>\n<pre><code>\/\/ \u274c Bad: a new random id on every render\nfunction Badge() {\n  const id = Math.random();\n  return &lt;span id={id}&gt;New&lt;\/span&gt;;\n}\n\n\/\/ \u2705 Good: use the built-in hook for stable ids\nimport { useId } from 'react';\n\nfunction Badge() {\n  const id = useId();\n  return &lt;span id={id}&gt;New&lt;\/span&gt;;\n}<\/code><\/pre>\n\n<h3>4. Calling setState during render<\/h3>\n<pre><code>\/\/ \u274c Bad: setting state while rendering causes extra renders or loops\nfunction Cart({ items }) {\n  const [count, setCount] = useState(0);\n  setCount(items.length);\n  return &lt;p&gt;{count} items&lt;\/p&gt;;\n}\n\n\/\/ \u2705 Good: derive the value directly \u2014 no state needed\nfunction Cart({ items }) {\n  const count = items.length;\n  return &lt;p&gt;{count} items&lt;\/p&gt;;\n}<\/code><\/pre>\n\n<div class=\"dd-note\"><strong>Good news:<\/strong> if the compiler finds code like this, it does not break your app. It just skips optimizing <em>that one<\/em> component or hook and keeps going with the rest.<\/div>\n\n<h2 id=\"eslint\">Catch Problems Early with ESLint<\/h2>\n<p>The compiler&#8217;s checks are built into the latest <code>eslint-plugin-react-hooks<\/code>. Its recommended preset now includes rules such as <code>purity<\/code>, <code>refs<\/code>, <code>immutability<\/code>, <code>set-state-in-render<\/code>, <code>set-state-in-effect<\/code> and <code>incompatible-library<\/code>, alongside the classic <code>rules-of-hooks<\/code> and <code>exhaustive-deps<\/code>.<\/p>\n<pre><code>npm install -D eslint-plugin-react-hooks@latest<\/code><\/pre>\n<div class=\"dd-file\">eslint.config.js<\/div>\n<pre><code>import reactHooks from 'eslint-plugin-react-hooks';\nimport { defineConfig } from 'eslint\/config';\n\nexport default defineConfig([\n  reactHooks.configs.flat.recommended,\n]);<\/code><\/pre>\n<p>Tip: turn on the lint rules <strong>before<\/strong> you turn on the compiler. Fixing the warnings first makes the switch much smoother \u2014 and the rules are useful even if you never enable the compiler.<\/p>\n\n<h2 id=\"adopt\">Adopting It in an Existing App<\/h2>\n<p>For a brand-new project, just enable the compiler for everything. For a big existing codebase, go step by step.<\/p>\n\n<h3>Option A: opt-in mode with &#8220;use memo&#8221;<\/h3>\n<p>Set <code>compilationMode<\/code> to <code>'annotation'<\/code>. Now the compiler only touches components and hooks that start with the <code>\"use memo\"<\/code> directive.<\/p>\n<div class=\"dd-file\">next.config.ts<\/div>\n<pre><code>import type { NextConfig } from 'next';\n\nconst nextConfig: NextConfig = {\n  reactCompiler: {\n    compilationMode: 'annotation',\n  },\n};\n\nexport default nextConfig;<\/code><\/pre>\n<pre><code>export default function Dashboard() {\n  'use memo'; \/\/ only this component is compiled\n  \/\/ ...\n}<\/code><\/pre>\n<p>With Babel, pass the same option: <code>['babel-plugin-react-compiler', { compilationMode: 'annotation' }]<\/code>.<\/p>\n\n<h3>Option B: compile everything, opt out problem files<\/h3>\n<p>If one component misbehaves after enabling the compiler, add <code>\"use no memo\"<\/code> at the top of it. Treat this as a temporary bandage while you fix the underlying issue.<\/p>\n<pre><code>function LegacyChart({ data }) {\n  'use no memo'; \/\/ skip this component for now\n  \/\/ ...\n}<\/code><\/pre>\n\n<h3>Should you delete your existing useMemo and useCallback?<\/h3>\n<p>The React team&#8217;s advice is clear:<\/p>\n<ul>\n<li><strong>New code:<\/strong> rely on the compiler. Use <code>useMemo<\/code>\/<code>useCallback<\/code> only when you need exact control \u2014 for example, a value used as an effect dependency that must not change.<\/li>\n<li><strong>Existing code:<\/strong> leave current memoization in place, or remove it only with careful testing. Removing it can change what the compiler outputs.<\/li>\n<\/ul>\n<p>There is no rush. Keeping old hooks around does no harm; the compiler works with them.<\/p>\n<\/div>\n\n\n\n<div class=\"dd-post\">\n<h2 id=\"errors\">Common Errors and Fixes<\/h2>\n<div class=\"dd-table-wrap\">\n<table>\n<thead><tr><th>Problem<\/th><th>Likely cause<\/th><th>Fix<\/th><\/tr><\/thead>\n<tbody>\n<tr><td>No &#8220;Memo \u2728&#8221; badge in DevTools<\/td><td>Compiler not running, or it skipped the component<\/td><td>Check your config; run ESLint to see which rule the component breaks<\/td><\/tr>\n<tr><td>Vite: the <code>babel<\/code> option in <code>react()<\/code> does nothing<\/td><td><code>@vitejs\/plugin-react<\/code> 6 removed the inline Babel option<\/td><td>Use <code>@rolldown\/plugin-babel<\/code> with <code>reactCompilerPreset()<\/code><\/td><\/tr>\n<tr><td><code>Cannot find module 'react\/compiler-runtime'<\/code><\/td><td>Project uses React 17 or 18<\/td><td>Install <code>react-compiler-runtime<\/code> and set <code>target: '18'<\/code> (or <code>'17'<\/code>)<\/td><\/tr>\n<tr><td>Next.js 16 ignores or warns about <code>experimental.reactCompiler<\/code><\/td><td>In Next.js 16 the option moved out of <code>experimental<\/code><\/td><td>Use top-level <code>reactCompiler: true<\/code><\/td><\/tr>\n<tr><td>UI does not update after you change an array or object<\/td><td>Code mutates state or props directly<\/td><td>Create new arrays\/objects (<code>[...arr]<\/code>, <code>{...obj}<\/code>, <code>toSorted()<\/code>)<\/td><\/tr>\n<tr><td>A third-party hook returns stale data<\/td><td>Library returns mutable objects the compiler can&#8217;t track<\/td><td>Watch for the <code>incompatible-library<\/code> lint warning; add <code>\"use no memo\"<\/code> to that component<\/td><\/tr>\n<tr><td>Effect runs more or less often than before<\/td><td>Effect depended on values that are now memoized differently<\/td><td>Keep an explicit <code>useMemo<\/code>\/<code>useCallback<\/code> for effect dependencies that must stay stable<\/td><\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n\n<h2 id=\"best-practices\">Best Practices<\/h2>\n<ul>\n<li><strong>Lint first, compile second.<\/strong> Turn on <code>eslint-plugin-react-hooks<\/code> and fix warnings before switching the compiler on.<\/li>\n<li><strong>Measure, don&#8217;t guess.<\/strong> Use the React DevTools Profiler before and after enabling the compiler so you can see the real gain.<\/li>\n<li><strong>Keep render pure.<\/strong> No API calls, no random values, no mutations in the component body. Put side effects in event handlers or effects.<\/li>\n<li><strong>Prefer derived values over extra state.<\/strong> If something can be calculated from props or state, calculate it \u2014 the compiler will cache it.<\/li>\n<li><strong>Roll out gradually in big apps.<\/strong> Start with annotation mode or a single folder, ship it, watch for bugs, then expand.<\/li>\n<li><strong>Use &#8220;use no memo&#8221; as a short-term fix only.<\/strong> Leave a TODO and come back to fix the real problem.<\/li>\n<li><strong>Have good tests.<\/strong> Memoization changes <em>when<\/em> code runs. End-to-end and component tests give you confidence during the switch.<\/li>\n<li><strong>Typing matters too.<\/strong> If you are upgrading tooling at the same time, our <a href=\"https:\/\/devdojo.co.in\/index.php\/2026\/10\/07\/typescript-7-migration-guide\/\">TypeScript 7 migration guide<\/a> covers the compiler side of TypeScript.<\/li>\n<\/ul>\n\n<h2 id=\"faq\">FAQ<\/h2>\n<details><summary>Is React Compiler ready for production?<\/summary><p>Yes. Version 1.0 was released as stable in October 2025, and Meta uses it in production apps such as the Meta Quest Store.<\/p><\/details>\n<details><summary>Do I still need useMemo and useCallback?<\/summary><p>Mostly no for new code. Keep them for special cases where you need exact control, like a value used as a dependency of <code>useEffect<\/code>. Existing ones can stay in place.<\/p><\/details>\n<details><summary>Does React Compiler work with React 18?<\/summary><p>Yes. Set <code>target: '18'<\/code> in the compiler options and install <code>react-compiler-runtime<\/code> as a regular dependency. React 17 is supported the same way with <code>target: '17'<\/code>.<\/p><\/details>\n<details><summary>Will it make my build slower?<\/summary><p>A little, because Babel has to run on your components. In Next.js the impact is small because it only compiles files that contain JSX or hooks.<\/p><\/details>\n<details><summary>Does it work with TypeScript?<\/summary><p>Yes. The compiler works on <code>.tsx<\/code> and <code>.ts<\/code> files the same way it works on JavaScript.<\/p><\/details>\n<details><summary>What happens if my code breaks the Rules of React?<\/summary><p>The compiler skips optimizing that component or hook and compiles the rest. Your app still works; that component just doesn&#8217;t get the speed boost.<\/p><\/details>\n<details><summary>Can I use it with React Native?<\/summary><p>Yes. It works through Babel, and new Expo apps (SDK 54 and up) have it enabled by default.<\/p><\/details>\n\n<h2 id=\"conclusion\">Conclusion<\/h2>\n<p>The React Compiler is one of the biggest quality-of-life upgrades React has had in years. Instead of guessing where to add <code>useMemo<\/code>, <code>useCallback<\/code> and <code>React.memo<\/code>, you write simple, readable components and let the build step handle performance. Turn on the ESLint rules, enable the compiler with one config change, check for the &#8220;Memo \u2728&#8221; badge, and roll it out step by step in older apps.<\/p>\n<p>Try it today on one page of your project \u2014 you will likely delete more code than you add.<\/p>\n\n<div class=\"dd-cta\">\n<h3>New posts every day on DevDojo<\/h3>\n<p>Practical tutorials on React, Next.js, Node.js, Python, AI and DevOps \u2014 written in simple English for developers in India and around the world. Bookmark <a href=\"https:\/\/devdojo.co.in\/\">devdojo.co.in<\/a> and drop your questions in the comments below!<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>React Compiler tutorial for beginners: set it up in Vite and Next.js, learn how automatic memoization replaces useMemo and useCallback, and fix common errors.<\/p>\n","protected":false},"author":1,"featured_media":191,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4],"tags":[46,79,77,76,78,80],"class_list":["post-192","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","category-reactjs","tag-next-js","tag-performance","tag-react","tag-react-compiler","tag-usememo","tag-vite"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.4 - aioseo.com -->\n\t<meta name=\"description\" content=\"React Compiler tutorial for beginners: set it up in Vite and Next.js, learn how automatic memoization replaces useMemo and useCallback, and fix common errors.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Lokendra\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/devdojo.co.in\/index.php\/2026\/10\/31\/react-compiler-tutorial\/\" \/>\n\t\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.4\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"DevDojo - Empowering Developers\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"React Compiler Tutorial: Stop Writing useMemo and useCallback\" \/>\n\t\t<meta property=\"og:description\" content=\"React Compiler tutorial for beginners: set it up in Vite and Next.js, learn how automatic memoization replaces useMemo and useCallback, and fix common errors.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/devdojo.co.in\/index.php\/2026\/10\/31\/react-compiler-tutorial\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2026-10-31T13:09:32+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2026-10-31T13:09:33+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"React Compiler Tutorial: Stop Writing useMemo and useCallback\" \/>\n\t\t<meta name=\"twitter:description\" content=\"React Compiler tutorial for beginners: set it up in Vite and Next.js, learn how automatic memoization replaces useMemo and useCallback, and fix common errors.\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/31\\\/react-compiler-tutorial\\\/#blogposting\",\"name\":\"React Compiler Tutorial: Automatic Memoization Explained\",\"headline\":\"React Compiler Tutorial: Stop Writing useMemo and useCallback\",\"author\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/author\\\/lokendra\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/react-compiler-tutorial.jpg\",\"width\":1200,\"height\":630,\"caption\":\"React Compiler tutorial banner showing code flowing through the compiler into an automatically memoized app\"},\"datePublished\":\"2026-10-31T13:09:32+00:00\",\"dateModified\":\"2026-10-31T13:09:33+00:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/31\\\/react-compiler-tutorial\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/31\\\/react-compiler-tutorial\\\/#webpage\"},\"articleSection\":\"Frontend, ReactJS, Next.js, Performance, React, React Compiler, useMemo, Vite\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/31\\\/react-compiler-tutorial\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/devdojo.co.in\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/#listItem\",\"name\":\"Frontend\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/#listItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/reactjs\\\/#listItem\",\"name\":\"ReactJS\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/reactjs\\\/#listItem\",\"position\":3,\"name\":\"ReactJS\",\"item\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/reactjs\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/31\\\/react-compiler-tutorial\\\/#listItem\",\"name\":\"React Compiler Tutorial: Stop Writing useMemo and useCallback\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/#listItem\",\"name\":\"Frontend\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/31\\\/react-compiler-tutorial\\\/#listItem\",\"position\":4,\"name\":\"React Compiler Tutorial: Stop Writing useMemo and useCallback\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/reactjs\\\/#listItem\",\"name\":\"ReactJS\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#organization\",\"name\":\"DevDojo\",\"description\":\"Empowering Developers\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/author\\\/lokendra\\\/#author\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/author\\\/lokendra\\\/\",\"name\":\"Lokendra\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/31\\\/react-compiler-tutorial\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/99f102f0cc9080237ce54b91304fd1b3b6fa29925cbaeba93cd796872e58b45c?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Lokendra\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/31\\\/react-compiler-tutorial\\\/#webpage\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/31\\\/react-compiler-tutorial\\\/\",\"name\":\"React Compiler Tutorial: Automatic Memoization Explained\",\"description\":\"React Compiler tutorial for beginners: set it up in Vite and Next.js, learn how automatic memoization replaces useMemo and useCallback, and fix common errors.\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/31\\\/react-compiler-tutorial\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/author\\\/lokendra\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/author\\\/lokendra\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/react-compiler-tutorial.jpg\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/31\\\/react-compiler-tutorial\\\/#mainImage\",\"width\":1200,\"height\":630,\"caption\":\"React Compiler tutorial banner showing code flowing through the compiler into an automatically memoized app\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/31\\\/react-compiler-tutorial\\\/#mainImage\"},\"datePublished\":\"2026-10-31T13:09:32+00:00\",\"dateModified\":\"2026-10-31T13:09:33+00:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#website\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/\",\"name\":\"DevDojo\",\"description\":\"Empowering Developers\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"React Compiler Tutorial: Automatic Memoization Explained","description":"React Compiler tutorial for beginners: set it up in Vite and Next.js, learn how automatic memoization replaces useMemo and useCallback, and fix common errors.","canonical_url":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/31\/react-compiler-tutorial\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BlogPosting","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/31\/react-compiler-tutorial\/#blogposting","name":"React Compiler Tutorial: Automatic Memoization Explained","headline":"React Compiler Tutorial: Stop Writing useMemo and useCallback","author":{"@id":"https:\/\/devdojo.co.in\/index.php\/author\/lokendra\/#author"},"publisher":{"@id":"https:\/\/devdojo.co.in\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/devdojo.co.in\/wp-content\/uploads\/2026\/10\/react-compiler-tutorial.jpg","width":1200,"height":630,"caption":"React Compiler tutorial banner showing code flowing through the compiler into an automatically memoized app"},"datePublished":"2026-10-31T13:09:32+00:00","dateModified":"2026-10-31T13:09:33+00:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/31\/react-compiler-tutorial\/#webpage"},"isPartOf":{"@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/31\/react-compiler-tutorial\/#webpage"},"articleSection":"Frontend, ReactJS, Next.js, Performance, React, React Compiler, useMemo, Vite"},{"@type":"BreadcrumbList","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/31\/react-compiler-tutorial\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/#listItem","position":1,"name":"Home","item":"https:\/\/devdojo.co.in\/","nextItem":{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/#listItem","name":"Frontend"}},{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/#listItem","position":2,"name":"Frontend","item":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/","nextItem":{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/reactjs\/#listItem","name":"ReactJS"},"previousItem":{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/reactjs\/#listItem","position":3,"name":"ReactJS","item":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/reactjs\/","nextItem":{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/31\/react-compiler-tutorial\/#listItem","name":"React Compiler Tutorial: Stop Writing useMemo and useCallback"},"previousItem":{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/#listItem","name":"Frontend"}},{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/31\/react-compiler-tutorial\/#listItem","position":4,"name":"React Compiler Tutorial: Stop Writing useMemo and useCallback","previousItem":{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/reactjs\/#listItem","name":"ReactJS"}}]},{"@type":"Organization","@id":"https:\/\/devdojo.co.in\/#organization","name":"DevDojo","description":"Empowering Developers","url":"https:\/\/devdojo.co.in\/"},{"@type":"Person","@id":"https:\/\/devdojo.co.in\/index.php\/author\/lokendra\/#author","url":"https:\/\/devdojo.co.in\/index.php\/author\/lokendra\/","name":"Lokendra","image":{"@type":"ImageObject","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/31\/react-compiler-tutorial\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/99f102f0cc9080237ce54b91304fd1b3b6fa29925cbaeba93cd796872e58b45c?s=96&d=mm&r=g","width":96,"height":96,"caption":"Lokendra"}},{"@type":"WebPage","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/31\/react-compiler-tutorial\/#webpage","url":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/31\/react-compiler-tutorial\/","name":"React Compiler Tutorial: Automatic Memoization Explained","description":"React Compiler tutorial for beginners: set it up in Vite and Next.js, learn how automatic memoization replaces useMemo and useCallback, and fix common errors.","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/devdojo.co.in\/#website"},"breadcrumb":{"@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/31\/react-compiler-tutorial\/#breadcrumblist"},"author":{"@id":"https:\/\/devdojo.co.in\/index.php\/author\/lokendra\/#author"},"creator":{"@id":"https:\/\/devdojo.co.in\/index.php\/author\/lokendra\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/devdojo.co.in\/wp-content\/uploads\/2026\/10\/react-compiler-tutorial.jpg","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/31\/react-compiler-tutorial\/#mainImage","width":1200,"height":630,"caption":"React Compiler tutorial banner showing code flowing through the compiler into an automatically memoized app"},"primaryImageOfPage":{"@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/31\/react-compiler-tutorial\/#mainImage"},"datePublished":"2026-10-31T13:09:32+00:00","dateModified":"2026-10-31T13:09:33+00:00"},{"@type":"WebSite","@id":"https:\/\/devdojo.co.in\/#website","url":"https:\/\/devdojo.co.in\/","name":"DevDojo","description":"Empowering Developers","inLanguage":"en-US","publisher":{"@id":"https:\/\/devdojo.co.in\/#organization"}}]},"og:locale":"en_US","og:site_name":"DevDojo - Empowering Developers","og:type":"article","og:title":"React Compiler Tutorial: Stop Writing useMemo and useCallback","og:description":"React Compiler tutorial for beginners: set it up in Vite and Next.js, learn how automatic memoization replaces useMemo and useCallback, and fix common errors.","og:url":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/31\/react-compiler-tutorial\/","article:published_time":"2026-10-31T13:09:32+00:00","article:modified_time":"2026-10-31T13:09:33+00:00","twitter:card":"summary_large_image","twitter:title":"React Compiler Tutorial: Stop Writing useMemo and useCallback","twitter:description":"React Compiler tutorial for beginners: set it up in Vite and Next.js, learn how automatic memoization replaces useMemo and useCallback, and fix common errors."},"aioseo_meta_data":{"post_id":"192","title":"React Compiler Tutorial: Automatic Memoization Explained","description":"React Compiler tutorial for beginners: set it up in Vite and Next.js, learn how automatic memoization replaces useMemo and useCallback, and fix common errors.","keywords":null,"keyphrases":{"focus":{"keyphrase":"React Compiler","score":85},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":"React Compiler Tutorial: Stop Writing useMemo and useCallback","og_description":"React Compiler tutorial for beginners: set it up in Vite and Next.js, learn how automatic memoization replaces useMemo and useCallback, and fix common errors.","og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"BlogPosting","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":0,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":{"faqs":[],"keyPoints":[],"schemas":[],"titles":[],"descriptions":[],"socialPosts":{"email":{"subject":"","preview":"","content":""},"linkedin":[],"twitter":[],"facebook":[],"instagram":[]}},"created":"2026-10-11 13:42:19","updated":"2026-10-31 13:40:20","focus_keyword":"React Compiler","additional_keywords":null,"truseo_locale":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/devdojo.co.in\/\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/\" title=\"Frontend\">Frontend<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/reactjs\/\" title=\"ReactJS\">ReactJS<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tReact Compiler Tutorial: Stop Writing useMemo and useCallback\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/devdojo.co.in\/"},{"label":"Frontend","link":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/"},{"label":"ReactJS","link":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/reactjs\/"},{"label":"React Compiler Tutorial: Stop Writing useMemo and useCallback","link":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/31\/react-compiler-tutorial\/"}],"_links":{"self":[{"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/posts\/192","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/comments?post=192"}],"version-history":[{"count":1,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/posts\/192\/revisions"}],"predecessor-version":[{"id":193,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/posts\/192\/revisions\/193"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/media\/191"}],"wp:attachment":[{"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=192"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/categories?post=192"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/tags?post=192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}