[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"categories-en":3,"post:\u002Fpost\u002Freact-compiler-youll-stop-copy-pasting-usememo-without-knowing-why":37},[4,11,17,24,30],{"id":5,"slug":6,"name":7,"colorHex":8,"iconName":9,"postCount":10},"0e2c1225-f78a-4c20-8c93-998ab9dc93b9","frontend","Frontend","#40484f",null,25,{"id":12,"slug":13,"name":14,"colorHex":15,"iconName":9,"postCount":16},"bc8df70e-b7fb-4d89-a80c-fd458d36d58c","code-development","Code & Development","#8b5cf6",23,{"id":18,"slug":19,"name":20,"colorHex":21,"iconName":22,"postCount":23},"550e8400-e29b-41d4-a716-446655440001","inteligencia-artificial","Artificial Intelligence","#6366f1","brain",14,{"id":25,"slug":26,"name":27,"colorHex":28,"iconName":9,"postCount":29},"ea63b69c-2eb4-4100-81f3-70ce52d33743","tech-news","Tech News","#e50606",4,{"id":31,"slug":32,"name":33,"colorHex":34,"iconName":35,"postCount":36},"550e8400-e29b-41d4-a716-446655440017","how-to-guides","How-To & Guides","#be123c","book-open",2,{"post":38,"related":732,"translations":797,"resolved":9},{"id":39,"slug":40,"title":41,"excerpt":42,"image":43,"featured":44,"groupId":45,"publishedAt":46,"readingTime":47,"views":48,"author":49,"category":51,"tags":52,"contentJson":59,"metaTitle":729,"metaDescription":730,"updatedAt":731},"9798f6ea-1dcb-4ecf-974c-fb7df7784744","react-compiler-youll-stop-copy-pasting-usememo-without-knowing-why","React Compiler: You'll Stop Copy-Pasting useMemo Without Knowing Why","The era of defensive `useMemo` is over. React Compiler 1.0 reads your data flow and optimizes it silently at build time.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1773678628080-featured-2vtiff.jpeg",false,"90d47874-7ecf-4ef3-9021-247e6d3f9f7e","2026-03-16T16:30:29.063+00:00",5,196,{"name":50,"avatar":9},"Genildo Souza",{"slug":6,"name":7,"color":8},[53,56],{"slug":54,"name":55},"javascript","JavaScript",{"slug":57,"name":58},"react","React",{"type":60,"content":61},"doc",[62,88,90,96,104,116,122,123,130,143,149,160,174,175,181,187,195,202,210,217,223,224,230,236,322,328,329,335,341,349,355,362,368,369,375,392,404,411,432,452,453,459,465,471,478,484,485,491,584,585,591,726],{"type":63,"attrs":64,"content":66},"blockquote",{"id":65},"quote_wua4rf5c",[67],{"type":68,"attrs":69,"content":71},"paragraph",{"id":70},"p_cu5em0f9",[72,75,80,82,86],{"text":73,"type":74},"Every React developer reaches a point where they start throwing ","text",{"text":76,"type":74,"marks":77},"useMemo",[78],{"type":79},"code",{"text":81,"type":74}," and ",{"text":83,"type":74,"marks":84},"useCallback",[85],{"type":79},{"text":87,"type":74}," at everything — not because they understood it, but because the component was slow and it seemed like the right thing to do. React Compiler 1.0 is here to end that.",{"type":89},"horizontalRule",{"type":68,"attrs":91,"content":93},{"id":92},"p_xpaoloqd",[94],{"text":95,"type":74},"You know this code:",{"type":97,"attrs":98,"content":101},"codeBlock",{"id":99,"language":54,"highlighted":100},"code_z4tciill","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> discountedPrice\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> useMemo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> product.price \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> -\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> discount);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}, [product.price, discount]);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> handleClick\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> useCallback\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  addToCart\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(product.id);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}, [product.id]);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> ProductCard\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> React.\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">memo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(({ \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">product\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">onAdd\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> }) \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F\u002F ...\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">});\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[102],{"text":103,"type":74},"const discountedPrice = useMemo(() => {\n  return product.price * (1 - discount);\n}, [product.price, discount]);\n\nconst handleClick = useCallback(() => {\n  addToCart(product.id);\n}, [product.id]);\n\nconst ProductCard = React.memo(({ product, onAdd }) => {\n  \u002F\u002F ...\n});\n",{"type":68,"attrs":105,"content":107},{"id":106},"p_jhdj6tk6",[108,110,114],{"text":109,"type":74},"It works. Sort of. But you probably don't know which of those memoizations actually make a difference — and which ones are there out of collective superstition. What if the dependency list is wrong? What if you forgot one? What if the child component doesn't use ",{"text":111,"type":74,"marks":112},"React.memo",[113],{"type":79},{"text":115,"type":74}," and all that work was pointless?",{"type":68,"attrs":117,"content":119},{"id":118},"p_03dzrp6k",[120],{"text":121,"type":74},"That's the problem React Compiler 1.0 solves. Not partially — it takes over that entire job for you.",{"type":89},{"type":124,"attrs":125,"content":127},"heading",{"id":126,"level":36},"h_wai9deo7",[128],{"text":129,"type":74},"What the React Compiler actually is",{"type":68,"attrs":131,"content":133},{"id":132},"p_ndxt44nc",[134,136,141],{"text":135,"type":74},"It's a tool that runs at ",{"text":137,"type":74,"marks":138},"build time",[139],{"type":140},"bold",{"text":142,"type":74}," — not at runtime. Before your code reaches the browser, the compiler analyzes it, understands the data flow of each component, and automatically inserts memoization in the right places.",{"type":68,"attrs":144,"content":146},{"id":145},"p_q1m01jdb",[147],{"text":148,"type":74},"Think of it this way: you write code the way you always have. Clean, direct, without worrying about optimization. The compiler reads everything, understands what changes and what doesn't, and transforms the code before building.",{"type":68,"attrs":150,"content":152},{"id":151},"p_qs2r8niw",[153,155,158],{"text":154,"type":74},"The difference from what you did manually? The compiler can memoize across conditional paths — things that human ",{"text":76,"type":74,"marks":156},[157],{"type":79},{"text":159,"type":74}," simply can't reach. If a component has an early return before a heavy computation, it knows that path doesn't need memoization. You couldn't express that with hooks.",{"type":63,"attrs":161,"content":163},{"id":162},"quote_o4e88u5r",[164],{"type":68,"attrs":165,"content":167},{"id":166},"p_zv0k52hr",[168,172],{"text":169,"type":74,"marks":170},"Released in October 2025 at React Conf",[171],{"type":140},{"text":173,"type":74},", React Compiler 1.0 went stable after months of beta. It was battle-tested in production on Meta's major apps before going public — and now has stable support in Next.js 16, Vite, and Expo.",{"type":89},{"type":124,"attrs":176,"content":178},{"id":177,"level":36},"h_u6ui0run",[179],{"text":180,"type":74},"Before and after in practice",{"type":68,"attrs":182,"content":184},{"id":183},"p_xqh0edm8",[185],{"text":186,"type":74},"The same product component, with and without the compiler:",{"type":68,"attrs":188,"content":190},{"id":189},"p_v57f6zvh",[191],{"text":192,"type":74,"marks":193},"Before — manual and verbose:",[194],{"type":140},{"type":97,"attrs":196,"content":199},{"id":197,"language":54,"highlighted":198},"code_ve3gbsla","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> ProductCard\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">({ \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">product\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">discount\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> }) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> price\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> useMemo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    () \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> product.price \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> -\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> discount),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    [product.price, discount]\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> handleAdd\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> useCallback\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">    addToCart\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(product.id);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  }, [product.id]);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">p\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>{price}<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">p\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> onClick\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">{handleAdd}>Add to cart<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[200],{"text":201,"type":74},"function ProductCard({ product, discount }) {\n  const price = useMemo(\n    () => product.price * (1 - discount),\n    [product.price, discount]\n  );\n\n  const handleAdd = useCallback(() => {\n    addToCart(product.id);\n  }, [product.id]);\n\n  return (\n    \u003Cdiv>\n      \u003Cp>{price}\u003C\u002Fp>\n      \u003Cbutton onClick={handleAdd}>Add to cart\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  );\n}\n",{"type":68,"attrs":203,"content":205},{"id":204},"p_me5ehobg",[206],{"text":207,"type":74,"marks":208},"After — clean, same result:",[209],{"type":140},{"type":97,"attrs":211,"content":214},{"id":212,"language":54,"highlighted":213},"code_01ekl0wg","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> ProductCard\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">({ \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">product\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">, \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#E36209;--shiki-dark:#FFAB70\">discount\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> }) {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> price\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> product.price \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">*\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">1\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> -\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> discount);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> handleAdd\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">    addToCart\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(product.id);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  }\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">  return\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> (\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">p\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>{price}<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">p\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> onClick\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">{handleAdd}>Add to cart<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">button\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">div\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  );\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[215],{"text":216,"type":74},"function ProductCard({ product, discount }) {\n  const price = product.price * (1 - discount);\n\n  function handleAdd() {\n    addToCart(product.id);\n  }\n\n  return (\n    \u003Cdiv>\n      \u003Cp>{price}\u003C\u002Fp>\n      \u003Cbutton onClick={handleAdd}>Add to cart\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  );\n}\n",{"type":68,"attrs":218,"content":220},{"id":219},"p_xhqy3zks",[221],{"text":222,"type":74},"The second component looks like 2018 React. But in production, with the compiler enabled, it has the same performance guarantees as the first — or better. The compiler does the invisible work.",{"type":89},{"type":124,"attrs":225,"content":227},{"id":226,"level":36},"h_w0xqm6ay",[228],{"text":229,"type":74},"The numbers that matter",{"type":68,"attrs":231,"content":233},{"id":232},"p_9irzkivx",[234],{"text":235,"type":74},"Meta didn't release the compiler based on theory. They used it in production first.",{"type":237,"attrs":238,"content":240},"table",{"id":239},"tbl_nfd7num6",[241,261,282,302],{"type":242,"content":243},"tableRow",[244,252],{"type":245,"attrs":246,"content":248},"tableHeader",{"align":9,"colspan":247,"rowspan":247,"colwidth":9},1,[249],{"type":68,"attrs":250},{"id":251},"p_9otiny4d",{"type":245,"attrs":253,"content":254},{"align":9,"colspan":247,"rowspan":247,"colwidth":9},[255],{"type":68,"attrs":256,"content":258},{"id":257},"p_rlhqi3li",[259],{"text":260,"type":74},"Result",{"type":242,"content":262},[263,273],{"type":264,"attrs":265,"content":266},"tableCell",{"align":9,"colspan":247,"rowspan":247,"colwidth":9},[267],{"type":68,"attrs":268,"content":270},{"id":269},"p_rb3f0ak2",[271],{"text":272,"type":74},"Initial load",{"type":264,"attrs":274,"content":275},{"align":9,"colspan":247,"rowspan":247,"colwidth":9},[276],{"type":68,"attrs":277,"content":279},{"id":278},"p_6ryhp7ci",[280],{"text":281,"type":74},"12% faster — Meta Quest Store",{"type":242,"content":283},[284,293],{"type":264,"attrs":285,"content":286},{"align":9,"colspan":247,"rowspan":247,"colwidth":9},[287],{"type":68,"attrs":288,"content":290},{"id":289},"p_qqer2bnr",[291],{"text":292,"type":74},"Interactions",{"type":264,"attrs":294,"content":295},{"align":9,"colspan":247,"rowspan":247,"colwidth":9},[296],{"type":68,"attrs":297,"content":299},{"id":298},"p_16g7uy71",[300],{"text":301,"type":74},"2.5× faster after adoption",{"type":242,"content":303},[304,313],{"type":264,"attrs":305,"content":306},{"align":9,"colspan":247,"rowspan":247,"colwidth":9},[307],{"type":68,"attrs":308,"content":310},{"id":309},"p_cjyq0bac",[311],{"text":312,"type":74},"Render time",{"type":264,"attrs":314,"content":315},{"align":9,"colspan":247,"rowspan":247,"colwidth":9},[316],{"type":68,"attrs":317,"content":319},{"id":318},"p_54lul860",[320],{"text":321,"type":74},"20–30% reduction — Sanity Studio",{"type":68,"attrs":323,"content":325},{"id":324},"p_6d20kmpg",[326],{"text":327,"type":74},"Sanity Studio compiled 1,231 out of 1,411 components and saw a 20 to 30% reduction in render time and latency. Not an artificial benchmark — real product, in production, with real users.",{"type":89},{"type":124,"attrs":330,"content":332},{"id":331,"level":36},"h_u2glvv94",[333],{"text":334,"type":74},"How to enable it",{"type":68,"attrs":336,"content":338},{"id":337},"p_4xcrvnqm",[339],{"text":340,"type":74},"If you're on Next.js 16, you already have stable support. Just enable it:",{"type":97,"attrs":342,"content":346},{"id":343,"language":344,"highlighted":345},"code_6iongj3i","typescript","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F next.config.ts\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> nextConfig\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  reactCompiler: \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\">true\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> default\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> nextConfig;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[347],{"text":348,"type":74},"\u002F\u002F next.config.ts\nconst nextConfig = {\n  reactCompiler: true,\n};\n\nexport default nextConfig;\n",{"type":68,"attrs":350,"content":352},{"id":351},"p_i4eg4znn",[353],{"text":354,"type":74},"In Vite, via Babel plugin:",{"type":97,"attrs":356,"content":359},{"id":357,"language":344,"highlighted":358},"code_1ioidgsx","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F vite.config.ts\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> react \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> \"@vitejs\u002Fplugin-react\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">;\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">export\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> default\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  plugins: [\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">    react\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">({\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      babel: {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">        plugins: [\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"babel-plugin-react-compiler\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">],\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      },\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    }),\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  ],\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">};\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[360],{"text":361,"type":74},"\u002F\u002F vite.config.ts\nimport react from \"@vitejs\u002Fplugin-react\";\n\nexport default {\n  plugins: [\n    react({\n      babel: {\n        plugins: [\"babel-plugin-react-compiler\"],\n      },\n    }),\n  ],\n};\n",{"type":68,"attrs":363,"content":365},{"id":364},"p_58xyq93v",[366],{"text":367,"type":74},"Works from React 17 — you don't need to be on React 19 to start using it.",{"type":89},{"type":124,"attrs":370,"content":372},{"id":371,"level":36},"h_qanio00o",[373],{"text":374,"type":74},"useMemo and useCallback still exist — just with a different role",{"type":68,"attrs":376,"content":378},{"id":377},"p_8686d35e",[379,381,385,388],{"text":380,"type":74},"Here's the detail most articles gloss over: ",{"text":382,"type":74,"marks":383},"you don't delete every ",[384],{"type":140},{"text":76,"type":74,"marks":386},[387],{"type":79},{"text":389,"type":74,"marks":390}," in your project.",[391],{"type":140},{"type":68,"attrs":393,"content":395},{"id":394},"p_cdsghpag",[396,398,402],{"text":397,"type":74},"The compiler handles automatic memoization in general. But there's one specific case where you still control it manually: when a value is a ",{"text":399,"type":74,"marks":400},"useEffect",[401],{"type":79},{"text":403,"type":74}," dependency and you need reference stability.",{"type":97,"attrs":405,"content":408},{"id":406,"language":54,"highlighted":407},"code_j782uu4c","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F This useMemo still makes sense\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">const\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#005CC5;--shiki-dark:#79B8FF\"> config\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\"> =\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> useMemo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> ({\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  timeout: props.timeout,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  retries: props.retries,\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}), [props.timeout, props.retries]);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">useEffect\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(() \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">=>\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">  connect\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">(config);\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}, [config]); \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F config needs to be stable\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[409],{"text":410,"type":74},"\u002F\u002F This useMemo still makes sense\nconst config = useMemo(() => ({\n  timeout: props.timeout,\n  retries: props.retries,\n}), [props.timeout, props.retries]);\n\nuseEffect(() => {\n  connect(config);\n}, [config]); \u002F\u002F config needs to be stable\n",{"type":68,"attrs":412,"content":414},{"id":413},"p_tc7k5v53",[415,417,420,422,425,427,430],{"text":416,"type":74},"Outside those cases, the compiler takes care of it. The practical rule: write clean React, without worrying about memoization. Only add ",{"text":76,"type":74,"marks":418},[419],{"type":79},{"text":421,"type":74}," or ",{"text":83,"type":74,"marks":423},[424],{"type":79},{"text":426,"type":74}," when a ",{"text":399,"type":74,"marks":428},[429],{"type":79},{"text":431,"type":74}," needs a stable dependency.",{"type":63,"attrs":433,"content":435},{"id":434},"quote_4n2nu0ux",[436],{"type":68,"attrs":437,"content":439},{"id":438},"p_b3ps5ey4",[440,444,446,450],{"text":441,"type":74,"marks":442},"One real warning:",[443],{"type":140},{"text":445,"type":74}," the compiler assumes you follow React's rules — no direct state mutation, no side effects in wrong places. If your code breaks those rules, the compiler optimizes based on the assumption you aren't — and bugs become harder to track down. Before enabling, run ",{"text":447,"type":74,"marks":448},"eslint-plugin-react-hooks",[449],{"type":79},{"text":451,"type":74}," with the compiler preset.",{"type":89},{"type":124,"attrs":454,"content":456},{"id":455,"level":36},"h_d8btv2ck",[457],{"text":458,"type":74},"Incremental adoption — not a big bang",{"type":68,"attrs":460,"content":462},{"id":461},"p_g38lnetp",[463],{"text":464,"type":74},"The React Compiler is not a migration. You don't need to rewrite anything.",{"type":68,"attrs":466,"content":468},{"id":467},"p_z657s6eu",[469],{"text":470,"type":74},"The React team's recommendation is simple: enable the compiler, run your end-to-end tests, and observe. If a component has compatibility issues, you can opt it out individually with a directive:",{"type":97,"attrs":472,"content":475},{"id":473,"language":54,"highlighted":474},"code_xsua6ugi","\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">function\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> LegacyComponent\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">() {\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">  \"use no memo\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">; \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">\u002F\u002F this component is excluded from the compiler\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6A737D;--shiki-dark:#6A737D\">  \u002F\u002F ...\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">}\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",[476],{"text":477,"type":74},"function LegacyComponent() {\n  \"use no memo\"; \u002F\u002F this component is excluded from the compiler\n  \u002F\u002F ...\n}\n",{"type":68,"attrs":479,"content":481},{"id":480},"p_cqmgt8k7",[482],{"text":483,"type":74},"This is rare in practice — but it exists as an escape hatch for cases where the compiler and legacy code don't play well together.",{"type":89},{"type":124,"attrs":486,"content":488},{"id":487,"level":36},"h_jc5ay5gd",[489],{"text":490,"type":74},"What changes in your day-to-day",{"type":492,"attrs":493,"content":496},"bulletList",{"id":494,"tight":495},"ul_vlb005tv",true,[497,512,526,540,554,568],{"type":498,"attrs":499,"content":501},"listItem",{"id":500},"li_osrhfnze",[502],{"type":68,"attrs":503,"content":505},{"id":504},"p_yujl9qol",[506,510],{"text":507,"type":74,"marks":508},"Write clean React",[509],{"type":140},{"text":511,"type":74}," — no preventive useMemo, no precautionary useCallback.",{"type":498,"attrs":513,"content":515},{"id":514},"li_yllldm4q",[516],{"type":68,"attrs":517,"content":519},{"id":518},"p_n1ldj73b",[520,524],{"text":521,"type":74,"marks":522},"The compiler optimizes at build time",[523],{"type":140},{"text":525,"type":74}," — automatic memoization, more precise than manual.",{"type":498,"attrs":527,"content":529},{"id":528},"li_7ymv1df7",[530],{"type":68,"attrs":531,"content":533},{"id":532},"p_p44ufnph",[534,538],{"text":535,"type":74,"marks":536},"useMemo still has a place",[537],{"type":140},{"text":539,"type":74}," — only when useEffect needs a stable dependency.",{"type":498,"attrs":541,"content":543},{"id":542},"li_v8dhutwk",[544],{"type":68,"attrs":545,"content":547},{"id":546},"p_6zbigje1",[548,552],{"text":549,"type":74,"marks":550},"Incremental adoption",[551],{"type":140},{"text":553,"type":74}," — enable, test, adjust. It's not a rewrite.",{"type":498,"attrs":555,"content":557},{"id":556},"li_y7c9zj8p",[558],{"type":68,"attrs":559,"content":561},{"id":560},"p_f5smwe1m",[562,566],{"text":563,"type":74,"marks":564},"Supported in Next.js 16 and Vite",[565],{"type":140},{"text":567,"type":74}," — one line of config to get started.",{"type":498,"attrs":569,"content":571},{"id":570},"li_31r5ezwn",[572],{"type":68,"attrs":573,"content":575},{"id":574},"p_z9ct830u",[576,578,582],{"text":577,"type":74},"Works from ",{"text":579,"type":74,"marks":580},"React 17",[581],{"type":140},{"text":583,"type":74}," — no need to migrate to React 19 first.",{"type":89},{"type":124,"attrs":586,"content":588},{"id":587,"level":36},"h_i7ovyx5v",[589],{"text":590,"type":74},"References",{"type":492,"attrs":592,"content":594},{"id":593,"tight":495},"ul_ftgiuczx",[595,628,649,670,690,710],{"type":498,"attrs":596,"content":598},{"id":597},"li_m0apd4kd",[599],{"type":68,"attrs":600,"content":602},{"id":601},"p_8njp08kc",[603,605,615,621,623],{"text":604,"type":74},"React Team — ",{"text":606,"type":74,"marks":607},"React Compiler 1.0 — ",[608],{"type":609,"attrs":610},"link",{"rel":611,"href":612,"class":613,"title":9,"target":614},"noopener noreferrer nofollow","https:\u002F\u002Freact.dev\u002Fblog\u002F2025\u002F10\u002F07\u002Freact-compiler-1","text-cyan-400 hover:underline cursor-pointer","_blank",{"text":616,"type":74,"marks":617},"react.dev",[618],{"type":609,"attrs":619},{"rel":611,"href":620,"class":613,"title":9,"target":614},"http:\u002F\u002Freact.dev",{"text":622,"type":74}," ",{"text":624,"type":74,"marks":625},"(October 2025)",[626],{"type":627},"italic",{"type":498,"attrs":629,"content":631},{"id":630},"li_08hfxmxj",[632],{"type":68,"attrs":633,"content":635},{"id":634},"p_rmt7tzzl",[636,638,644,645],{"text":637,"type":74},"InfoQ — ",{"text":639,"type":74,"marks":640},"Meta's React Compiler 1.0 Brings Automatic Memoization to Production",[641],{"type":609,"attrs":642},{"rel":611,"href":643,"class":613,"title":9,"target":614},"https:\u002F\u002Fwww.infoq.com\u002Fnews\u002F2025\u002F12\u002Freact-compiler-meta\u002F",{"text":622,"type":74},{"text":646,"type":74,"marks":647},"(December 2025)",[648],{"type":627},{"type":498,"attrs":650,"content":652},{"id":651},"li_276qyk9c",[653],{"type":68,"attrs":654,"content":656},{"id":655},"p_30gd9wit",[657,659,665,666],{"text":658,"type":74},"Econify — ",{"text":660,"type":74,"marks":661},"The Loop: React Compiler v1.0 Goes Stable",[662],{"type":609,"attrs":663},{"rel":611,"href":664,"class":613,"title":9,"target":614},"https:\u002F\u002Fwww.econify.com\u002Fnews\u002Fthe-loop-react-compiler-v1-0-automatic-memoization-goes-stable",{"text":622,"type":74},{"text":667,"type":74,"marks":668},"(November 2025)",[669],{"type":627},{"type":498,"attrs":671,"content":673},{"id":672},"li_avmiec70",[674],{"type":68,"attrs":675,"content":677},{"id":676},"p_dp7qumos",[678,680,686,687],{"text":679,"type":74},"React Libraries — ",{"text":681,"type":74,"marks":682},"React Compiler 1.0: Performance Gains Without the Hype",[683],{"type":609,"attrs":684},{"rel":611,"href":685,"class":613,"title":9,"target":614},"https:\u002F\u002Fwww.reactlibraries.com\u002Fnews\u002Freact-compiler-1-0-performance-gains-without-the-hype",{"text":622,"type":74},{"text":667,"type":74,"marks":688},[689],{"type":627},{"type":498,"attrs":691,"content":693},{"id":692},"li_bmw80ovy",[694],{"type":68,"attrs":695,"content":697},{"id":696},"p_n4sp1x44",[698,700,706,707],{"text":699,"type":74},"Cheesecake Labs — ",{"text":701,"type":74,"marks":702},"React Conf 2025: React Compiler 1.0 and Key Updates",[703],{"type":609,"attrs":704},{"rel":611,"href":705,"class":613,"title":9,"target":614},"https:\u002F\u002Fcheesecakelabs.com\u002Fblog\u002Freact-conf-2025-highlights\u002F",{"text":622,"type":74},{"text":624,"type":74,"marks":708},[709],{"type":627},{"type":498,"attrs":711,"content":713},{"id":712},"li_g5m5d8e2",[714],{"type":68,"attrs":715,"content":717},{"id":716},"p_cw3lo0y5",[718,720],{"text":719,"type":74},"State of React 2025 — ",{"text":721,"type":74,"marks":722},"Conclusion",[723],{"type":609,"attrs":724},{"rel":611,"href":725,"class":613,"title":9,"target":614},"https:\u002F\u002F2025.stateofreact.com\u002Fen-US\u002Fconclusion\u002F",{"type":68,"attrs":727},{"id":728},"p_85rlnm0b","React Compiler 1.0: Stop Copy-Pasting useMemo","Still guessing `useMemo` dependencies? React Compiler 1.0 automates memoization at build time, cutting render times by 30%. Setup inside.","2026-08-24T14:53:53.315534+00:00",[733,752,765,779],{"id":734,"slug":735,"title":736,"excerpt":737,"image":738,"featured":44,"groupId":739,"publishedAt":740,"readingTime":741,"views":742,"author":743,"category":744,"tags":745},"841890b2-1a8c-43d4-b434-b94714705605","debugging-css-the-forgotten-margin-and-frontend-lessons","Debugging CSS: The Forgotten Margin and Frontend Lessons","A forgotten CSS property turned a minor layout glitch into a two-week ordeal. Learn how to avoid emotional debugging and fix complex UI issues faster.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1767745741814-featured-i6p1gc.jpeg","bcaf503a-15c1-4d28-8795-6ae3c2a3e06f","2026-08-02T16:09:35.153874+00:00",8,0,{"name":50,"avatar":9},{"slug":6,"name":7,"color":8},[746,749],{"slug":747,"name":748},"css","CSS",{"slug":750,"name":751},"performance","Performance",{"id":753,"slug":754,"title":755,"excerpt":756,"image":757,"featured":44,"groupId":758,"publishedAt":759,"readingTime":23,"views":742,"author":760,"category":761,"tags":762},"d5167910-cc5b-4fae-a2e8-d09adcf354b2","stop-using-usememo-wrong-a-practical-guide-to-react-performance","Stop Using useMemo Wrong: A Practical Guide to React Performance","Master React useMemo with this guide. Learn when to memoize, how to fix dependency array bugs, and why over-optimization can hurt your performance.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1769657096789-featured-r2q2sb.jpeg","a1c571c1-aa37-404d-ac67-f265c8a9985b","2026-07-08T23:34:34.563653+00:00",{"name":50,"avatar":9},{"slug":6,"name":7,"color":8},[763,764],{"slug":54,"name":55},{"slug":57,"name":58},{"id":766,"slug":767,"title":768,"excerpt":769,"image":770,"featured":44,"groupId":771,"publishedAt":772,"readingTime":773,"views":742,"author":774,"category":775,"tags":776},"f1b5af43-20da-4150-a7c7-ef17675d1fee","css-animations-how-to-build-performant-professional-interfaces-without-messy-code","CSS Animations: How to Build Performant, Professional Interfaces Without Messy Code","Bring your web interfaces to life. Learn when to use CSS transitions versus keyframes and how to optimize your animations for peak performance.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1770952624247-featured-in9pir.jpeg","de5a7726-1227-4080-b572-9d91a37b207b","2026-07-04T03:00:53.174696+00:00",17,{"name":50,"avatar":9},{"slug":6,"name":7,"color":8},[777,778],{"slug":747,"name":748},{"slug":750,"name":751},{"id":780,"slug":781,"title":782,"excerpt":783,"image":784,"featured":44,"groupId":785,"publishedAt":786,"readingTime":787,"views":742,"author":788,"category":789,"tags":790},"86e804a8-71f4-4985-a013-d6c033e28967","angular-micro-frontends-how-to-scale-large-applications-and-eliminate-monolithic-build-times-with-module-federation","Angular Micro-frontends: How to Scale Large Applications and Eliminate Monolithic Build Times with Module Federation","Discover how to break down large Angular monoliths using Module Federation to enable independent deployments and seamless team scaling.","https:\u002F\u002Fmfgiomkkbihnlpfdxwrt.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fblog-assets\u002Fmedia\u002Ffeatured\u002F1774499855857-featured-x9ugz1.jpg","a029aa9b-573b-4e5b-921b-eaecea6e989f","2026-06-21T06:41:59.230237+00:00",10,{"name":50,"avatar":9},{"slug":6,"name":7,"color":8},[791,794,795],{"slug":792,"name":793},"angular","Angular",{"slug":54,"name":55},{"slug":344,"name":796},"TypeScript",{"pt":798,"en":40},"react-compiler-otimizacao-automatica-e-o-fim-do-usememo"]