[{"data":1,"prerenderedAt":283},["ShallowReactive",2],{"term-r\u002Freact-compiler":3,"related-r\u002Freact-compiler":269},{"id":4,"title":5,"acronym":6,"body":7,"category":251,"description":252,"difficulty":253,"extension":254,"letter":255,"meta":256,"navigation":105,"path":257,"related":258,"seo":263,"sitemap":264,"stem":267,"subcategory":6,"__hash__":268},"terms\u002Fterms\u002Fr\u002Freact-compiler.md","React Compiler",null,{"type":8,"value":9,"toc":245},"minimark",[10,15,19,23,26,30,234,238,241],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 - The Vibe Check",[16,17,18],"p",{},"React Compiler is React finally doing your homework for you. For years you had to sprinkle useMemo and useCallback everywhere like protective salt to stop unnecessary re-renders. Now a build time compiler reads your component, figures out what actually needs memoizing, and inserts the optimization itself. You write normal code, it quietly makes it fast.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"React Compiler is a build time tool (previously known as React Forget) that automatically memoizes components and values by statically analyzing your code's dependencies, eliminating the need for manual useMemo, useCallback, and React.memo calls in most cases. It ships as a Babel plugin and requires components to follow the Rules of React to compile safely.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-jsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F babel.config.js\nmodule.exports = {\n  plugins: [['babel-plugin-react-compiler', {}]]\n};\n\n\u002F\u002F No manual memoization needed anymore:\nfunction ProductList({ items }) {\n  const sorted = items.slice().sort(); \u002F\u002F auto-memoized\n  return sorted.map(i => \u003CItem key={i.id} {...i} \u002F>);\n}\n","jsx","",[38,39,40,49,62,94,100,107,113,136,171,228],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F\u002F babel.config.js\n",[41,50,52,56,59],{"class":43,"line":51},2,[41,53,55],{"class":54},"sMK4o","module.exports",[41,57,58],{"class":54}," =",[41,60,61],{"class":54}," {\n",[41,63,65,69,72,76,79,83,85,88,91],{"class":43,"line":64},3,[41,66,68],{"class":67},"swJcz","  plugins",[41,70,71],{"class":54},":",[41,73,75],{"class":74},"sTEyZ"," [[",[41,77,78],{"class":54},"'",[41,80,82],{"class":81},"sfazB","babel-plugin-react-compiler",[41,84,78],{"class":54},[41,86,87],{"class":54},",",[41,89,90],{"class":54}," {}",[41,92,93],{"class":74},"]]\n",[41,95,97],{"class":43,"line":96},4,[41,98,99],{"class":54},"};\n",[41,101,103],{"class":43,"line":102},5,[41,104,106],{"emptyLinePlaceholder":105},true,"\n",[41,108,110],{"class":43,"line":109},6,[41,111,112],{"class":47},"\u002F\u002F No manual memoization needed anymore:\n",[41,114,116,120,124,127,131,134],{"class":43,"line":115},7,[41,117,119],{"class":118},"spNyl","function",[41,121,123],{"class":122},"s2Zo4"," ProductList",[41,125,126],{"class":54},"({",[41,128,130],{"class":129},"sHdIc"," items",[41,132,133],{"class":54}," })",[41,135,61],{"class":54},[41,137,139,142,145,147,149,152,155,158,160,163,165,168],{"class":43,"line":138},8,[41,140,141],{"class":118},"  const",[41,143,144],{"class":74}," sorted",[41,146,58],{"class":54},[41,148,130],{"class":74},[41,150,151],{"class":54},".",[41,153,154],{"class":122},"slice",[41,156,157],{"class":67},"()",[41,159,151],{"class":54},[41,161,162],{"class":122},"sort",[41,164,157],{"class":67},[41,166,167],{"class":54},";",[41,169,170],{"class":47}," \u002F\u002F auto-memoized\n",[41,172,174,178,180,182,185,188,191,194,197,201,204,207,209,211,214,217,219,222,225],{"class":43,"line":173},9,[41,175,177],{"class":176},"s7zQu","  return",[41,179,144],{"class":74},[41,181,151],{"class":54},[41,183,184],{"class":122},"map",[41,186,187],{"class":67},"(",[41,189,190],{"class":129},"i",[41,192,193],{"class":118}," =>",[41,195,196],{"class":54}," \u003C",[41,198,200],{"class":199},"sBMFI","Item",[41,202,203],{"class":118}," key",[41,205,206],{"class":54},"={",[41,208,190],{"class":74},[41,210,151],{"class":54},[41,212,213],{"class":74},"id",[41,215,216],{"class":54},"} {...",[41,218,190],{"class":74},[41,220,221],{"class":54},"} \u002F>",[41,223,224],{"class":67},")",[41,226,227],{"class":54},";\n",[41,229,231],{"class":43,"line":230},10,[41,232,233],{"class":54},"}\n",[11,235,237],{"id":236},"when-youll-hear-this","When You'll Hear This",[16,239,240],{},"\"We ripped out half our useMemo calls after turning on React Compiler.\" \u002F \"React Compiler flagged a rule violation, so it just skipped memoizing that component.\"",[242,243,244],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":36,"searchDepth":51,"depth":51,"links":246},[247,248,249,250],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":236,"depth":51,"text":237},"frontend","React Compiler is React finally doing your homework for you.","intermediate","md","r",{},"\u002Fterms\u002Fr\u002Freact-compiler",[259,260,261,262],"React","Memoization","useOptimistic","Hook",{"title":5,"description":252},{"changefreq":265,"priority":266},"weekly",0.7,"terms\u002Fr\u002Freact-compiler","LK6FiEuP_Dt1ZEEhepirTMr2bPEwZtRM5oxqFuCOI_o",[270,273,276,280],{"title":262,"path":271,"acronym":6,"category":251,"difficulty":253,"description":272},"\u002Fterms\u002Fh\u002Fhook","Hooks are special functions in React that let function components use superpowers like state and lifecycle that used to be class-only.",{"title":260,"path":274,"acronym":6,"category":251,"difficulty":253,"description":275},"\u002Fterms\u002Fm\u002Fmemoization","Teaching your code to remember answers it already calculated. If someone asks 'what's 47 × 83?' and you worked it out once, you write down the answer.",{"title":259,"path":277,"acronym":6,"category":251,"difficulty":278,"description":279},"\u002Fterms\u002Fr\u002Freact","beginner","React is a JavaScript library from Meta for building UIs out of components.",{"title":261,"path":281,"acronym":6,"category":251,"difficulty":253,"description":282},"\u002Fterms\u002Fu\u002Fuseoptimistic","useOptimistic lets your UI lie a little, in a good way.",1792528114859]