[{"data":1,"prerenderedAt":2709},["ShallowReactive",2],{"blog-post-\u002Fblogs\u002F2026-05-18-react-compiler":3,"related-\u002Fblogs\u002F2026-05-18-react-compiler":2674},{"id":4,"title":5,"alt":6,"authors":7,"body":13,"date":2641,"description":2642,"extension":2643,"image":2644,"meta":2645,"navigation":202,"ogImage":12,"path":2646,"published":202,"reviewers":2647,"seo":2667,"stem":2668,"tags":2669,"__hash__":2673},"blogs\u002Fblogs\u002F2026-05-18-react-compiler\u002Findex.md","React Compiler","React DevTools affichant les badges Memo sur des composants automatiquemen",[8],{"id":9,"name":10,"image":11,"linkedin":12,"x":12},"320f4462-cd38-8071-8eb7-f90621a068a3","Marjorie Dieusart","\u002Fdefault-author-image.webp",null,{"type":14,"value":15,"toc":2611},"minimark",[16,21,35,38,43,46,54,57,79,84,1178,1197,1199,1201,1205,1208,1212,1215,1224,1226,1230,1234,1251,1275,1384,1388,1427,1429,1441,1445,2071,2075,2089,2092,2109,2111,2115,2118,2129,2135,2139,2176,2178,2182,2185,2197,2199,2203,2206,2215,2218,2320,2323,2332,2334,2338,2341,2344,2348,2365,2368,2370,2374,2377,2383,2407,2413,2416,2418,2422,2425,2532,2535,2537,2541,2544,2548,2559,2563,2574,2576,2580,2583,2586,2589,2593,2599,2602,2605,2607],[17,18,20],"h1",{"id":19},"react-compiler-ce-que-cest-comment-ça-marche-et-pourquoi-jai-décidé-de-le-mettre-en-place","React Compiler : Ce que c’est, comment ça marche, et pourquoi j’ai décidé de le mettre en place",[22,23,24,32],"blockquote",{},[25,26,27,28,31],"p",{},"💡 Depuis que React Compiler est passé en version stable (v1.0, octobre 2025), la question ne se pose plus vraiment : oui, il est prêt pour la production.",[29,30],"br",{},"\nMais est-ce que ça vaut le coup ? Et est-ce qu’un compilateur peut vraiment remplacer une optimisation faite à la main ?",[25,33,34],{},"Voici ce que j’ai compris en le mettant en place sur un projet React.",[36,37],"hr",{},[39,40,42],"h2",{"id":41},"létat-actuel","L’état actuel",[25,44,45],{},"Pour comprendre l’intérêt de React Compiler, repartons du fonctionnement classique de React.",[25,47,48,49,53],{},"Dès qu’un composant parent met à jour son état (par exemple après un ",[50,51,52],"code",{},"setState","), tous ses enfants se re-rendent aussi — même si leurs props n’ont pas changé.",[25,55,56],{},"Pour limiter ça, on s’appuie sur plusieurs outils :",[58,59,60,67,73],"ul",{},[61,62,63,66],"li",{},[50,64,65],{},"React.memo"," → éviter le re-render d’un composant si ses props n’ont pas changé",[61,68,69,72],{},[50,70,71],{},"useMemo"," → éviter de recalculer des valeurs lors de chaque re rendu",[61,74,75,78],{},[50,76,77],{},"useCallback"," → stabiliser les références des fonctions",[80,81,83],"h3",{"id":82},"exemple-classique","Exemple classique",[85,86,91],"pre",{"className":87,"code":88,"language":89,"meta":90,"style":90},"language-javascript shiki shiki-themes github-dark-default","const allProducts = Array.from({ length: 50 }, (_, i) => ({\n      id: i,\n      name: `Produit ${i}`,\n      price: (i + 1) * 10,\n  }));\n\n  async function fetchProducts(query) {\n      await new Promise((r) => setTimeout(r, 200));\n      return allProducts.filter((p) =>\n          p.name.toLowerCase().includes(query.toLowerCase())\n      );\n  }\n\n  \u002F\u002F React.memo sur chaque composant pour éviter les re-renders inutiles\n  const Input = React.memo(function Input({ value, onChange, placeholder,\n  variant }) {\n      return (\n          \u003Cinput\n              value={value}\n              onChange={onChange}\n              placeholder={placeholder}\n              className={`input input--${variant}`}\n          \u002F>\n      );\n  });\n\n  const ProductCard = React.memo(function ProductCard({ product, onAddToCart })\n  {\n      \u002F\u002F Simule un traitement coûteux\n      let score = 0;\n      for (let i = 0; i \u003C 100_000; i++) score += product.price;\n\n      return (\n          \u003Cdiv>\n              \u003Ch2>{product.name}\u003C\u002Fh2>\n              \u003Cp>{product.price} €\u003C\u002Fp>\n              \u003Cbutton onClick={() => onAddToCart(product.id)}>Ajouter\u003C\u002Fbutton>\n          \u003C\u002Fdiv>\n      );\n  });\n\n  function ProductList() {\n      const [query, setQuery] = useState('');\n      const [products, setProducts] = useState(allProducts);\n\n      useEffect(() => {\n          if (!query) { setProducts(allProducts); return; }\n          const timeout = setTimeout(async () => {\n              setProducts(await fetchProducts(query));\n          }, 300);\n          return () => clearTimeout(timeout);\n      }, [query]);\n\n \u002F\u002F useCallback obligatoire : sans ça, React.memo sur Input et ProductCard ne sert à rien\n\u002F\u002F — les fonctions seraient recréées à chaque render et les props changeraient quand même\n      const handleQueryChange = useCallback((e) => setQuery(e.target.value),\n  []);\n      const handleAddToCart = useCallback((id) => {\n          console.log('Ajout au panier :', id);\n      }, []);\n\n      return (\n          \u003Cdiv>\n              \u003CInput\n                  value={query}\n                  onChange={handleQueryChange}\n                  placeholder=\"Rechercher...\"\n                  variant=\"primary\"\n              \u002F>\n              {products.map((product) => (\n                  \u003CProductCard\n                      key={product.id}\n                      product={product}\n                      onAddToCart={handleAddToCart}\n                  \u002F>\n              ))}\n          \u003C\u002Fdiv>\n      );\n  }\n","javascript","",[50,92,93,145,151,169,191,197,204,225,259,280,303,309,315,320,327,369,378,386,396,410,422,434,452,458,463,469,474,507,513,519,537,580,585,592,603,630,653,686,696,701,706,711,723,755,779,784,798,823,848,864,875,891,897,902,908,914,942,948,971,988,994,999,1006,1015,1023,1035,1048,1059,1070,1076,1098,1107,1120,1132,1145,1151,1159,1168,1173],{"__ignoreMap":90},[94,95,98,102,106,109,113,117,120,123,126,130,133,136,139,142],"span",{"class":96,"line":97},"line",1,[94,99,101],{"class":100},"suJrU","const",[94,103,105],{"class":104},"sFSAA"," allProducts",[94,107,108],{"class":100}," =",[94,110,112],{"class":111},"sZEs4"," Array.",[94,114,116],{"class":115},"sc3cj","from",[94,118,119],{"class":111},"({ length: ",[94,121,122],{"class":104},"50",[94,124,125],{"class":111}," }, (",[94,127,129],{"class":128},"sQhOw","_",[94,131,132],{"class":111},", ",[94,134,135],{"class":128},"i",[94,137,138],{"class":111},") ",[94,140,141],{"class":100},"=>",[94,143,144],{"class":111}," ({\n",[94,146,148],{"class":96,"line":147},2,[94,149,150],{"class":111},"      id: i,\n",[94,152,154,157,161,163,166],{"class":96,"line":153},3,[94,155,156],{"class":111},"      name: ",[94,158,160],{"class":159},"s9uIt","`Produit ${",[94,162,135],{"class":111},[94,164,165],{"class":159},"}`",[94,167,168],{"class":111},",\n",[94,170,172,175,178,181,183,186,189],{"class":96,"line":171},4,[94,173,174],{"class":111},"      price: (i ",[94,176,177],{"class":100},"+",[94,179,180],{"class":104}," 1",[94,182,138],{"class":111},[94,184,185],{"class":100},"*",[94,187,188],{"class":104}," 10",[94,190,168],{"class":111},[94,192,194],{"class":96,"line":193},5,[94,195,196],{"class":111},"  }));\n",[94,198,200],{"class":96,"line":199},6,[94,201,203],{"emptyLinePlaceholder":202},true,"\n",[94,205,207,210,213,216,219,222],{"class":96,"line":206},7,[94,208,209],{"class":100},"  async",[94,211,212],{"class":100}," function",[94,214,215],{"class":115}," fetchProducts",[94,217,218],{"class":111},"(",[94,220,221],{"class":128},"query",[94,223,224],{"class":111},") {\n",[94,226,228,231,234,237,240,243,245,247,250,253,256],{"class":96,"line":227},8,[94,229,230],{"class":100},"      await",[94,232,233],{"class":100}," new",[94,235,236],{"class":104}," Promise",[94,238,239],{"class":111},"((",[94,241,242],{"class":128},"r",[94,244,138],{"class":111},[94,246,141],{"class":100},[94,248,249],{"class":115}," setTimeout",[94,251,252],{"class":111},"(r, ",[94,254,255],{"class":104},"200",[94,257,258],{"class":111},"));\n",[94,260,262,265,268,271,273,275,277],{"class":96,"line":261},9,[94,263,264],{"class":100},"      return",[94,266,267],{"class":111}," allProducts.",[94,269,270],{"class":115},"filter",[94,272,239],{"class":111},[94,274,25],{"class":128},[94,276,138],{"class":111},[94,278,279],{"class":100},"=>\n",[94,281,283,286,289,292,295,298,300],{"class":96,"line":282},10,[94,284,285],{"class":111},"          p.name.",[94,287,288],{"class":115},"toLowerCase",[94,290,291],{"class":111},"().",[94,293,294],{"class":115},"includes",[94,296,297],{"class":111},"(query.",[94,299,288],{"class":115},[94,301,302],{"class":111},"())\n",[94,304,306],{"class":96,"line":305},11,[94,307,308],{"class":111},"      );\n",[94,310,312],{"class":96,"line":311},12,[94,313,314],{"class":111},"  }\n",[94,316,318],{"class":96,"line":317},13,[94,319,203],{"emptyLinePlaceholder":202},[94,321,323],{"class":96,"line":322},14,[94,324,326],{"class":325},"sH3jZ","  \u002F\u002F React.memo sur chaque composant pour éviter les re-renders inutiles\n",[94,328,330,333,336,338,341,344,346,349,351,354,357,359,362,364,367],{"class":96,"line":329},15,[94,331,332],{"class":100},"  const",[94,334,335],{"class":104}," Input",[94,337,108],{"class":100},[94,339,340],{"class":111}," React.",[94,342,343],{"class":115},"memo",[94,345,218],{"class":111},[94,347,348],{"class":100},"function",[94,350,335],{"class":115},[94,352,353],{"class":111},"({ ",[94,355,356],{"class":128},"value",[94,358,132],{"class":111},[94,360,361],{"class":128},"onChange",[94,363,132],{"class":111},[94,365,366],{"class":128},"placeholder",[94,368,168],{"class":111},[94,370,372,375],{"class":96,"line":371},16,[94,373,374],{"class":128},"  variant",[94,376,377],{"class":111}," }) {\n",[94,379,381,383],{"class":96,"line":380},17,[94,382,264],{"class":100},[94,384,385],{"class":111}," (\n",[94,387,389,392],{"class":96,"line":388},18,[94,390,391],{"class":111},"          \u003C",[94,393,395],{"class":394},"sPWt5","input\n",[94,397,399,402,405,407],{"class":96,"line":398},19,[94,400,401],{"class":104},"              value",[94,403,404],{"class":100},"={",[94,406,356],{"class":111},[94,408,409],{"class":100},"}\n",[94,411,413,416,418,420],{"class":96,"line":412},20,[94,414,415],{"class":104},"              onChange",[94,417,404],{"class":100},[94,419,361],{"class":111},[94,421,409],{"class":100},[94,423,425,428,430,432],{"class":96,"line":424},21,[94,426,427],{"class":104},"              placeholder",[94,429,404],{"class":100},[94,431,366],{"class":111},[94,433,409],{"class":100},[94,435,437,440,442,445,448,450],{"class":96,"line":436},22,[94,438,439],{"class":104},"              className",[94,441,404],{"class":100},[94,443,444],{"class":159},"`input input--${",[94,446,447],{"class":111},"variant",[94,449,165],{"class":159},[94,451,409],{"class":100},[94,453,455],{"class":96,"line":454},23,[94,456,457],{"class":111},"          \u002F>\n",[94,459,461],{"class":96,"line":460},24,[94,462,308],{"class":111},[94,464,466],{"class":96,"line":465},25,[94,467,468],{"class":111},"  });\n",[94,470,472],{"class":96,"line":471},26,[94,473,203],{"emptyLinePlaceholder":202},[94,475,477,479,482,484,486,488,490,492,494,496,499,501,504],{"class":96,"line":476},27,[94,478,332],{"class":100},[94,480,481],{"class":104}," ProductCard",[94,483,108],{"class":100},[94,485,340],{"class":111},[94,487,343],{"class":115},[94,489,218],{"class":111},[94,491,348],{"class":100},[94,493,481],{"class":115},[94,495,353],{"class":111},[94,497,498],{"class":128},"product",[94,500,132],{"class":111},[94,502,503],{"class":128},"onAddToCart",[94,505,506],{"class":111}," })\n",[94,508,510],{"class":96,"line":509},28,[94,511,512],{"class":111},"  {\n",[94,514,516],{"class":96,"line":515},29,[94,517,518],{"class":325},"      \u002F\u002F Simule un traitement coûteux\n",[94,520,522,525,528,531,534],{"class":96,"line":521},30,[94,523,524],{"class":100},"      let",[94,526,527],{"class":111}," score ",[94,529,530],{"class":100},"=",[94,532,533],{"class":104}," 0",[94,535,536],{"class":111},";\n",[94,538,540,543,546,549,552,554,556,559,562,565,568,571,574,577],{"class":96,"line":539},31,[94,541,542],{"class":100},"      for",[94,544,545],{"class":111}," (",[94,547,548],{"class":100},"let",[94,550,551],{"class":111}," i ",[94,553,530],{"class":100},[94,555,533],{"class":104},[94,557,558],{"class":111},"; i ",[94,560,561],{"class":100},"\u003C",[94,563,564],{"class":104}," 100_000",[94,566,567],{"class":111},"; i",[94,569,570],{"class":100},"++",[94,572,573],{"class":111},") score ",[94,575,576],{"class":100},"+=",[94,578,579],{"class":111}," product.price;\n",[94,581,583],{"class":96,"line":582},32,[94,584,203],{"emptyLinePlaceholder":202},[94,586,588,590],{"class":96,"line":587},33,[94,589,264],{"class":100},[94,591,385],{"class":111},[94,593,595,597,600],{"class":96,"line":594},34,[94,596,391],{"class":111},[94,598,599],{"class":394},"div",[94,601,602],{"class":111},">\n",[94,604,606,609,611,614,617,620,623,626,628],{"class":96,"line":605},35,[94,607,608],{"class":111},"              \u003C",[94,610,39],{"class":394},[94,612,613],{"class":111},">",[94,615,616],{"class":100},"{",[94,618,619],{"class":111},"product.name",[94,621,622],{"class":100},"}",[94,624,625],{"class":111},"\u003C\u002F",[94,627,39],{"class":394},[94,629,602],{"class":111},[94,631,633,635,637,639,641,644,646,649,651],{"class":96,"line":632},36,[94,634,608],{"class":111},[94,636,25],{"class":394},[94,638,613],{"class":111},[94,640,616],{"class":100},[94,642,643],{"class":111},"product.price",[94,645,622],{"class":100},[94,647,648],{"class":111}," €\u003C\u002F",[94,650,25],{"class":394},[94,652,602],{"class":111},[94,654,656,658,661,664,666,669,671,674,677,679,682,684],{"class":96,"line":655},37,[94,657,608],{"class":111},[94,659,660],{"class":394},"button",[94,662,663],{"class":104}," onClick",[94,665,404],{"class":100},[94,667,668],{"class":111},"() ",[94,670,141],{"class":100},[94,672,673],{"class":115}," onAddToCart",[94,675,676],{"class":111},"(product.id)",[94,678,622],{"class":100},[94,680,681],{"class":111},">Ajouter\u003C\u002F",[94,683,660],{"class":394},[94,685,602],{"class":111},[94,687,689,692,694],{"class":96,"line":688},38,[94,690,691],{"class":111},"          \u003C\u002F",[94,693,599],{"class":394},[94,695,602],{"class":111},[94,697,699],{"class":96,"line":698},39,[94,700,308],{"class":111},[94,702,704],{"class":96,"line":703},40,[94,705,468],{"class":111},[94,707,709],{"class":96,"line":708},41,[94,710,203],{"emptyLinePlaceholder":202},[94,712,714,717,720],{"class":96,"line":713},42,[94,715,716],{"class":100},"  function",[94,718,719],{"class":115}," ProductList",[94,721,722],{"class":111},"() {\n",[94,724,726,729,732,734,736,739,742,744,747,749,752],{"class":96,"line":725},43,[94,727,728],{"class":100},"      const",[94,730,731],{"class":111}," [",[94,733,221],{"class":104},[94,735,132],{"class":111},[94,737,738],{"class":104},"setQuery",[94,740,741],{"class":111},"] ",[94,743,530],{"class":100},[94,745,746],{"class":115}," useState",[94,748,218],{"class":111},[94,750,751],{"class":159},"''",[94,753,754],{"class":111},");\n",[94,756,758,760,762,765,767,770,772,774,776],{"class":96,"line":757},44,[94,759,728],{"class":100},[94,761,731],{"class":111},[94,763,764],{"class":104},"products",[94,766,132],{"class":111},[94,768,769],{"class":104},"setProducts",[94,771,741],{"class":111},[94,773,530],{"class":100},[94,775,746],{"class":115},[94,777,778],{"class":111},"(allProducts);\n",[94,780,782],{"class":96,"line":781},45,[94,783,203],{"emptyLinePlaceholder":202},[94,785,787,790,793,795],{"class":96,"line":786},46,[94,788,789],{"class":115},"      useEffect",[94,791,792],{"class":111},"(() ",[94,794,141],{"class":100},[94,796,797],{"class":111}," {\n",[94,799,801,804,806,809,812,814,817,820],{"class":96,"line":800},47,[94,802,803],{"class":100},"          if",[94,805,545],{"class":111},[94,807,808],{"class":100},"!",[94,810,811],{"class":111},"query) { ",[94,813,769],{"class":115},[94,815,816],{"class":111},"(allProducts); ",[94,818,819],{"class":100},"return",[94,821,822],{"class":111},"; }\n",[94,824,826,829,832,834,836,838,841,844,846],{"class":96,"line":825},48,[94,827,828],{"class":100},"          const",[94,830,831],{"class":104}," timeout",[94,833,108],{"class":100},[94,835,249],{"class":115},[94,837,218],{"class":111},[94,839,840],{"class":100},"async",[94,842,843],{"class":111}," () ",[94,845,141],{"class":100},[94,847,797],{"class":111},[94,849,851,854,856,859,861],{"class":96,"line":850},49,[94,852,853],{"class":115},"              setProducts",[94,855,218],{"class":111},[94,857,858],{"class":100},"await",[94,860,215],{"class":115},[94,862,863],{"class":111},"(query));\n",[94,865,867,870,873],{"class":96,"line":866},50,[94,868,869],{"class":111},"          }, ",[94,871,872],{"class":104},"300",[94,874,754],{"class":111},[94,876,878,881,883,885,888],{"class":96,"line":877},51,[94,879,880],{"class":100},"          return",[94,882,843],{"class":111},[94,884,141],{"class":100},[94,886,887],{"class":115}," clearTimeout",[94,889,890],{"class":111},"(timeout);\n",[94,892,894],{"class":96,"line":893},52,[94,895,896],{"class":111},"      }, [query]);\n",[94,898,900],{"class":96,"line":899},53,[94,901,203],{"emptyLinePlaceholder":202},[94,903,905],{"class":96,"line":904},54,[94,906,907],{"class":325}," \u002F\u002F useCallback obligatoire : sans ça, React.memo sur Input et ProductCard ne sert à rien\n",[94,909,911],{"class":96,"line":910},55,[94,912,913],{"class":325},"\u002F\u002F — les fonctions seraient recréées à chaque render et les props changeraient quand même\n",[94,915,917,919,922,924,927,929,932,934,936,939],{"class":96,"line":916},56,[94,918,728],{"class":100},[94,920,921],{"class":104}," handleQueryChange",[94,923,108],{"class":100},[94,925,926],{"class":115}," useCallback",[94,928,239],{"class":111},[94,930,931],{"class":128},"e",[94,933,138],{"class":111},[94,935,141],{"class":100},[94,937,938],{"class":115}," setQuery",[94,940,941],{"class":111},"(e.target.value),\n",[94,943,945],{"class":96,"line":944},57,[94,946,947],{"class":111},"  []);\n",[94,949,951,953,956,958,960,962,965,967,969],{"class":96,"line":950},58,[94,952,728],{"class":100},[94,954,955],{"class":104}," handleAddToCart",[94,957,108],{"class":100},[94,959,926],{"class":115},[94,961,239],{"class":111},[94,963,964],{"class":128},"id",[94,966,138],{"class":111},[94,968,141],{"class":100},[94,970,797],{"class":111},[94,972,974,977,980,982,985],{"class":96,"line":973},59,[94,975,976],{"class":111},"          console.",[94,978,979],{"class":115},"log",[94,981,218],{"class":111},[94,983,984],{"class":159},"'Ajout au panier :'",[94,986,987],{"class":111},", id);\n",[94,989,991],{"class":96,"line":990},60,[94,992,993],{"class":111},"      }, []);\n",[94,995,997],{"class":96,"line":996},61,[94,998,203],{"emptyLinePlaceholder":202},[94,1000,1002,1004],{"class":96,"line":1001},62,[94,1003,264],{"class":100},[94,1005,385],{"class":111},[94,1007,1009,1011,1013],{"class":96,"line":1008},63,[94,1010,391],{"class":111},[94,1012,599],{"class":394},[94,1014,602],{"class":111},[94,1016,1018,1020],{"class":96,"line":1017},64,[94,1019,608],{"class":111},[94,1021,1022],{"class":394},"Input\n",[94,1024,1026,1029,1031,1033],{"class":96,"line":1025},65,[94,1027,1028],{"class":104},"                  value",[94,1030,404],{"class":100},[94,1032,221],{"class":111},[94,1034,409],{"class":100},[94,1036,1038,1041,1043,1046],{"class":96,"line":1037},66,[94,1039,1040],{"class":104},"                  onChange",[94,1042,404],{"class":100},[94,1044,1045],{"class":111},"handleQueryChange",[94,1047,409],{"class":100},[94,1049,1051,1054,1056],{"class":96,"line":1050},67,[94,1052,1053],{"class":104},"                  placeholder",[94,1055,530],{"class":100},[94,1057,1058],{"class":159},"\"Rechercher...\"\n",[94,1060,1062,1065,1067],{"class":96,"line":1061},68,[94,1063,1064],{"class":104},"                  variant",[94,1066,530],{"class":100},[94,1068,1069],{"class":159},"\"primary\"\n",[94,1071,1073],{"class":96,"line":1072},69,[94,1074,1075],{"class":111},"              \u002F>\n",[94,1077,1079,1082,1085,1088,1090,1092,1094,1096],{"class":96,"line":1078},70,[94,1080,1081],{"class":100},"              {",[94,1083,1084],{"class":111},"products.",[94,1086,1087],{"class":115},"map",[94,1089,239],{"class":111},[94,1091,498],{"class":128},[94,1093,138],{"class":111},[94,1095,141],{"class":100},[94,1097,385],{"class":111},[94,1099,1101,1104],{"class":96,"line":1100},71,[94,1102,1103],{"class":111},"                  \u003C",[94,1105,1106],{"class":394},"ProductCard\n",[94,1108,1110,1113,1115,1118],{"class":96,"line":1109},72,[94,1111,1112],{"class":104},"                      key",[94,1114,404],{"class":100},[94,1116,1117],{"class":111},"product.id",[94,1119,409],{"class":100},[94,1121,1123,1126,1128,1130],{"class":96,"line":1122},73,[94,1124,1125],{"class":104},"                      product",[94,1127,404],{"class":100},[94,1129,498],{"class":111},[94,1131,409],{"class":100},[94,1133,1135,1138,1140,1143],{"class":96,"line":1134},74,[94,1136,1137],{"class":104},"                      onAddToCart",[94,1139,404],{"class":100},[94,1141,1142],{"class":111},"handleAddToCart",[94,1144,409],{"class":100},[94,1146,1148],{"class":96,"line":1147},75,[94,1149,1150],{"class":111},"                  \u002F>\n",[94,1152,1154,1157],{"class":96,"line":1153},76,[94,1155,1156],{"class":111},"              ))",[94,1158,409],{"class":100},[94,1160,1162,1164,1166],{"class":96,"line":1161},77,[94,1163,691],{"class":111},[94,1165,599],{"class":394},[94,1167,602],{"class":111},[94,1169,1171],{"class":96,"line":1170},78,[94,1172,308],{"class":111},[94,1174,1176],{"class":96,"line":1175},79,[94,1177,314],{"class":111},[22,1179,1180,1183,1194],{},[25,1181,1182],{},"⚠️ Ça marche, mais :",[58,1184,1185,1188,1191],{},[61,1186,1187],{},"c’est verbeux",[61,1189,1190],{},"c’est fragile (oubli de dépendance = bug)",[61,1192,1193],{},"ça oblige à penser en permanence à la performance",[25,1195,1196],{},"Et parfois, on découpe des composants uniquement pour limiter les re-renders.",[36,1198],{},[22,1200],{},[39,1202,1204],{"id":1203},"un-compilateur-pour-optimiser-automatiquement","Un compilateur pour optimiser automatiquement",[25,1206,1207],{},"React Compiler arrive avec une idée simple: écrire du code normal et laisser le compilateur optimiser automatiquement",[80,1209,1211],{"id":1210},"contexte","Contexte",[25,1213,1214],{},"Le projet s'appelait à l'origine React Forget — le nom résumait bien l'ambition. Annoncé à React Conf 2021, il a été testé en production chez Meta (Instagram, Quest Store) pendant plusieurs années avant d'être ouvert au public.",[25,1216,1217],{},[1218,1219,1223],"a",{"href":1220,"rel":1221},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=lGEMwh32soc",[1222],"nofollow","file",[36,1225],{},[39,1227,1229],{"id":1228},"installation","Installation",[80,1231,1233],{"id":1232},"avec-vite","Avec Vite",[22,1235,1236],{},[25,1237,1238,1239,1243,1244,1247,1248,1250],{},"💡 React Compiler repose sur Babel. Il fonctionne uniquement avec ",[1240,1241,1242],"strong",{},"@vitejs\u002Fplugin-react"," — pas encore avec ",[1240,1245,1246],{},"@vitejs\u002Fplugin-react-swc",".",[29,1249],{},"\nSi ton projet utilise SWC, tu devras d'abord basculer sur le plugin Babel, ou patienter : le support SWC est en cours de discussion.",[85,1252,1256],{"className":1253,"code":1254,"language":1255,"meta":90,"style":90},"language-bash shiki shiki-themes github-dark-default","npm install --save-dev --save-exact babel-plugin-react-compiler@latest\n","bash",[50,1257,1258],{"__ignoreMap":90},[94,1259,1260,1263,1266,1269,1272],{"class":96,"line":97},[94,1261,1262],{"class":128},"npm",[94,1264,1265],{"class":159}," install",[94,1267,1268],{"class":104}," --save-dev",[94,1270,1271],{"class":104}," --save-exact",[94,1273,1274],{"class":159}," babel-plugin-react-compiler@latest\n",[85,1276,1278],{"className":87,"code":1277,"language":89,"meta":90,"style":90},"\u002F\u002F vite.config.js\nimport { defineConfig } from 'vite';\nimport react from '@vitejs\u002Fplugin-react';\n\nexport default defineConfig({\n    plugins: [\n        react({\n            babel: {\n                plugins: ['babel-plugin-react-compiler'],\n            },\n        }),\n    ],\n});\n",[50,1279,1280,1285,1300,1314,1318,1332,1337,1344,1349,1360,1365,1370,1377],{"__ignoreMap":90},[94,1281,1282],{"class":96,"line":97},[94,1283,1284],{"class":325},"\u002F\u002F vite.config.js\n",[94,1286,1287,1290,1293,1295,1298],{"class":96,"line":147},[94,1288,1289],{"class":100},"import",[94,1291,1292],{"class":111}," { defineConfig } ",[94,1294,116],{"class":100},[94,1296,1297],{"class":159}," 'vite'",[94,1299,536],{"class":111},[94,1301,1302,1304,1307,1309,1312],{"class":96,"line":153},[94,1303,1289],{"class":100},[94,1305,1306],{"class":111}," react ",[94,1308,116],{"class":100},[94,1310,1311],{"class":159}," '@vitejs\u002Fplugin-react'",[94,1313,536],{"class":111},[94,1315,1316],{"class":96,"line":171},[94,1317,203],{"emptyLinePlaceholder":202},[94,1319,1320,1323,1326,1329],{"class":96,"line":193},[94,1321,1322],{"class":100},"export",[94,1324,1325],{"class":100}," default",[94,1327,1328],{"class":115}," defineConfig",[94,1330,1331],{"class":128},"({\n",[94,1333,1334],{"class":96,"line":199},[94,1335,1336],{"class":111},"    plugins: [\n",[94,1338,1339,1342],{"class":96,"line":206},[94,1340,1341],{"class":115},"        react",[94,1343,1331],{"class":111},[94,1345,1346],{"class":96,"line":227},[94,1347,1348],{"class":111},"            babel: {\n",[94,1350,1351,1354,1357],{"class":96,"line":261},[94,1352,1353],{"class":111},"                plugins: [",[94,1355,1356],{"class":159},"'babel-plugin-react-compiler'",[94,1358,1359],{"class":111},"],\n",[94,1361,1362],{"class":96,"line":282},[94,1363,1364],{"class":111},"            },\n",[94,1366,1367],{"class":96,"line":305},[94,1368,1369],{"class":111},"        }),\n",[94,1371,1372,1375],{"class":96,"line":311},[94,1373,1374],{"class":111},"    ]",[94,1376,168],{"class":128},[94,1378,1379,1382],{"class":96,"line":317},[94,1380,1381],{"class":128},"})",[94,1383,536],{"class":111},[80,1385,1387],{"id":1386},"avec-nextjs-v1531","Avec Next.js (v15.3.1+)",[85,1389,1391],{"className":87,"code":1390,"language":89,"meta":90,"style":90},"\u002F\u002F next.config.js\nmodule.exports = {\n    reactCompiler: true,\n};\n",[50,1392,1393,1398,1412,1422],{"__ignoreMap":90},[94,1394,1395],{"class":96,"line":97},[94,1396,1397],{"class":325},"\u002F\u002F next.config.js\n",[94,1399,1400,1403,1405,1408,1410],{"class":96,"line":147},[94,1401,1402],{"class":104},"module",[94,1404,1247],{"class":111},[94,1406,1407],{"class":104},"exports",[94,1409,108],{"class":100},[94,1411,797],{"class":111},[94,1413,1414,1417,1420],{"class":96,"line":153},[94,1415,1416],{"class":111},"    reactCompiler: ",[94,1418,1419],{"class":104},"true",[94,1421,168],{"class":111},[94,1423,1424],{"class":96,"line":171},[94,1425,1426],{"class":111},"};\n",[36,1428],{},[22,1430,1431],{},[25,1432,1433,1434,1437,1438],{},"💡 ",[1240,1435,1436],{},"--save-exact"," est recommandé si ta couverture de tests est partielle : les futures versions peuvent modifier le comportement de mémoïsation  (mettre en cache le résultat d'un calcul pour éviter de le refaire) et affecter tes ",[50,1439,1440],{},"useEffect",[39,1442,1444],{"id":1443},"exemple-concret-sans-mémoïsation-manuelle","Exemple concret (sans mémoïsation manuelle)",[85,1446,1448],{"className":87,"code":1447,"language":89,"meta":90,"style":90},"function Input({ value, onChange, placeholder, variant }) {\n      return (\n          \u003Cinput\n              value={value}\n              onChange={onChange}\n              placeholder={placeholder}\n              className={`input input--${variant}`}\n          \u002F>\n      );\n  }\n\n  function ProductCard({ product, onAddToCart }) {\n      let score = 0;\n      for (let i = 0; i \u003C 100_000; i++) score += product.price;\n\n      console.log('render :', product.name);\n\n      return (\n          \u003Cdiv>\n              \u003Ch2>{product.name}\u003C\u002Fh2>\n              \u003Cp>{product.price} € — score : {score}\u003C\u002Fp>\n              \u003Cbutton onClick={() => onAddToCart(product.id)}>Ajouter\u003C\u002Fbutton>\n          \u003C\u002Fdiv>\n      );\n  }\n\n  function ProductList() {\n      const [query, setQuery] = useState('');\n      const [products, setProducts] = useState(allProducts);\n\n      useEffect(() => {\n          if (!query) { setProducts(allProducts); return; }\n          const timeout = setTimeout(async () => {\n              setProducts(await fetchProducts(query));\n          }, 300);\n          return () => clearTimeout(timeout);\n      }, [query]);\n\n      const handleAddToCart = (id) => {\n          console.log('Ajout au panier :', id);\n      };\n\n      return (\n          \u003Cdiv>\n              \u003CInput\n                  value={query}\n                  onChange={(e) => setQuery(e.target.value)}\n                  placeholder=\"Rechercher...\"\n                  variant=\"primary\"\n              \u002F>\n              {products.map((product) => (\n                  \u003CProductCard\n                      key={product.id}\n                      product={product}\n                      onAddToCart={handleAddToCart}\n                  \u002F>\n              ))}\n          \u003C\u002Fdiv>\n      );\n  }\n",[50,1449,1450,1474,1480,1486,1496,1506,1516,1530,1534,1538,1542,1546,1562,1574,1604,1608,1623,1627,1633,1641,1661,1691,1717,1725,1729,1733,1737,1745,1769,1789,1793,1803,1821,1841,1853,1861,1873,1877,1881,1899,1911,1916,1920,1926,1934,1940,1950,1971,1979,1987,1991,2009,2015,2025,2035,2045,2049,2055,2063,2067],{"__ignoreMap":90},[94,1451,1452,1454,1456,1458,1460,1462,1464,1466,1468,1470,1472],{"class":96,"line":97},[94,1453,348],{"class":100},[94,1455,335],{"class":115},[94,1457,353],{"class":111},[94,1459,356],{"class":128},[94,1461,132],{"class":111},[94,1463,361],{"class":128},[94,1465,132],{"class":111},[94,1467,366],{"class":128},[94,1469,132],{"class":111},[94,1471,447],{"class":128},[94,1473,377],{"class":111},[94,1475,1476,1478],{"class":96,"line":147},[94,1477,264],{"class":100},[94,1479,385],{"class":111},[94,1481,1482,1484],{"class":96,"line":153},[94,1483,391],{"class":111},[94,1485,395],{"class":394},[94,1487,1488,1490,1492,1494],{"class":96,"line":171},[94,1489,401],{"class":104},[94,1491,404],{"class":100},[94,1493,356],{"class":111},[94,1495,409],{"class":100},[94,1497,1498,1500,1502,1504],{"class":96,"line":193},[94,1499,415],{"class":104},[94,1501,404],{"class":100},[94,1503,361],{"class":111},[94,1505,409],{"class":100},[94,1507,1508,1510,1512,1514],{"class":96,"line":199},[94,1509,427],{"class":104},[94,1511,404],{"class":100},[94,1513,366],{"class":111},[94,1515,409],{"class":100},[94,1517,1518,1520,1522,1524,1526,1528],{"class":96,"line":206},[94,1519,439],{"class":104},[94,1521,404],{"class":100},[94,1523,444],{"class":159},[94,1525,447],{"class":111},[94,1527,165],{"class":159},[94,1529,409],{"class":100},[94,1531,1532],{"class":96,"line":227},[94,1533,457],{"class":111},[94,1535,1536],{"class":96,"line":261},[94,1537,308],{"class":111},[94,1539,1540],{"class":96,"line":282},[94,1541,314],{"class":111},[94,1543,1544],{"class":96,"line":305},[94,1545,203],{"emptyLinePlaceholder":202},[94,1547,1548,1550,1552,1554,1556,1558,1560],{"class":96,"line":311},[94,1549,716],{"class":100},[94,1551,481],{"class":115},[94,1553,353],{"class":111},[94,1555,498],{"class":128},[94,1557,132],{"class":111},[94,1559,503],{"class":128},[94,1561,377],{"class":111},[94,1563,1564,1566,1568,1570,1572],{"class":96,"line":317},[94,1565,524],{"class":100},[94,1567,527],{"class":111},[94,1569,530],{"class":100},[94,1571,533],{"class":104},[94,1573,536],{"class":111},[94,1575,1576,1578,1580,1582,1584,1586,1588,1590,1592,1594,1596,1598,1600,1602],{"class":96,"line":322},[94,1577,542],{"class":100},[94,1579,545],{"class":111},[94,1581,548],{"class":100},[94,1583,551],{"class":111},[94,1585,530],{"class":100},[94,1587,533],{"class":104},[94,1589,558],{"class":111},[94,1591,561],{"class":100},[94,1593,564],{"class":104},[94,1595,567],{"class":111},[94,1597,570],{"class":100},[94,1599,573],{"class":111},[94,1601,576],{"class":100},[94,1603,579],{"class":111},[94,1605,1606],{"class":96,"line":329},[94,1607,203],{"emptyLinePlaceholder":202},[94,1609,1610,1613,1615,1617,1620],{"class":96,"line":371},[94,1611,1612],{"class":111},"      console.",[94,1614,979],{"class":115},[94,1616,218],{"class":111},[94,1618,1619],{"class":159},"'render :'",[94,1621,1622],{"class":111},", product.name);\n",[94,1624,1625],{"class":96,"line":380},[94,1626,203],{"emptyLinePlaceholder":202},[94,1628,1629,1631],{"class":96,"line":388},[94,1630,264],{"class":100},[94,1632,385],{"class":111},[94,1634,1635,1637,1639],{"class":96,"line":398},[94,1636,391],{"class":111},[94,1638,599],{"class":394},[94,1640,602],{"class":111},[94,1642,1643,1645,1647,1649,1651,1653,1655,1657,1659],{"class":96,"line":412},[94,1644,608],{"class":111},[94,1646,39],{"class":394},[94,1648,613],{"class":111},[94,1650,616],{"class":100},[94,1652,619],{"class":111},[94,1654,622],{"class":100},[94,1656,625],{"class":111},[94,1658,39],{"class":394},[94,1660,602],{"class":111},[94,1662,1663,1665,1667,1669,1671,1673,1675,1678,1680,1683,1685,1687,1689],{"class":96,"line":424},[94,1664,608],{"class":111},[94,1666,25],{"class":394},[94,1668,613],{"class":111},[94,1670,616],{"class":100},[94,1672,643],{"class":111},[94,1674,622],{"class":100},[94,1676,1677],{"class":111}," € — score : ",[94,1679,616],{"class":100},[94,1681,1682],{"class":111},"score",[94,1684,622],{"class":100},[94,1686,625],{"class":111},[94,1688,25],{"class":394},[94,1690,602],{"class":111},[94,1692,1693,1695,1697,1699,1701,1703,1705,1707,1709,1711,1713,1715],{"class":96,"line":436},[94,1694,608],{"class":111},[94,1696,660],{"class":394},[94,1698,663],{"class":104},[94,1700,404],{"class":100},[94,1702,668],{"class":111},[94,1704,141],{"class":100},[94,1706,673],{"class":115},[94,1708,676],{"class":111},[94,1710,622],{"class":100},[94,1712,681],{"class":111},[94,1714,660],{"class":394},[94,1716,602],{"class":111},[94,1718,1719,1721,1723],{"class":96,"line":454},[94,1720,691],{"class":111},[94,1722,599],{"class":394},[94,1724,602],{"class":111},[94,1726,1727],{"class":96,"line":460},[94,1728,308],{"class":111},[94,1730,1731],{"class":96,"line":465},[94,1732,314],{"class":111},[94,1734,1735],{"class":96,"line":471},[94,1736,203],{"emptyLinePlaceholder":202},[94,1738,1739,1741,1743],{"class":96,"line":476},[94,1740,716],{"class":100},[94,1742,719],{"class":115},[94,1744,722],{"class":111},[94,1746,1747,1749,1751,1753,1755,1757,1759,1761,1763,1765,1767],{"class":96,"line":509},[94,1748,728],{"class":100},[94,1750,731],{"class":111},[94,1752,221],{"class":104},[94,1754,132],{"class":111},[94,1756,738],{"class":104},[94,1758,741],{"class":111},[94,1760,530],{"class":100},[94,1762,746],{"class":115},[94,1764,218],{"class":111},[94,1766,751],{"class":159},[94,1768,754],{"class":111},[94,1770,1771,1773,1775,1777,1779,1781,1783,1785,1787],{"class":96,"line":515},[94,1772,728],{"class":100},[94,1774,731],{"class":111},[94,1776,764],{"class":104},[94,1778,132],{"class":111},[94,1780,769],{"class":104},[94,1782,741],{"class":111},[94,1784,530],{"class":100},[94,1786,746],{"class":115},[94,1788,778],{"class":111},[94,1790,1791],{"class":96,"line":521},[94,1792,203],{"emptyLinePlaceholder":202},[94,1794,1795,1797,1799,1801],{"class":96,"line":539},[94,1796,789],{"class":115},[94,1798,792],{"class":111},[94,1800,141],{"class":100},[94,1802,797],{"class":111},[94,1804,1805,1807,1809,1811,1813,1815,1817,1819],{"class":96,"line":582},[94,1806,803],{"class":100},[94,1808,545],{"class":111},[94,1810,808],{"class":100},[94,1812,811],{"class":111},[94,1814,769],{"class":115},[94,1816,816],{"class":111},[94,1818,819],{"class":100},[94,1820,822],{"class":111},[94,1822,1823,1825,1827,1829,1831,1833,1835,1837,1839],{"class":96,"line":587},[94,1824,828],{"class":100},[94,1826,831],{"class":104},[94,1828,108],{"class":100},[94,1830,249],{"class":115},[94,1832,218],{"class":111},[94,1834,840],{"class":100},[94,1836,843],{"class":111},[94,1838,141],{"class":100},[94,1840,797],{"class":111},[94,1842,1843,1845,1847,1849,1851],{"class":96,"line":594},[94,1844,853],{"class":115},[94,1846,218],{"class":111},[94,1848,858],{"class":100},[94,1850,215],{"class":115},[94,1852,863],{"class":111},[94,1854,1855,1857,1859],{"class":96,"line":605},[94,1856,869],{"class":111},[94,1858,872],{"class":104},[94,1860,754],{"class":111},[94,1862,1863,1865,1867,1869,1871],{"class":96,"line":632},[94,1864,880],{"class":100},[94,1866,843],{"class":111},[94,1868,141],{"class":100},[94,1870,887],{"class":115},[94,1872,890],{"class":111},[94,1874,1875],{"class":96,"line":655},[94,1876,896],{"class":111},[94,1878,1879],{"class":96,"line":688},[94,1880,203],{"emptyLinePlaceholder":202},[94,1882,1883,1885,1887,1889,1891,1893,1895,1897],{"class":96,"line":698},[94,1884,728],{"class":100},[94,1886,955],{"class":115},[94,1888,108],{"class":100},[94,1890,545],{"class":111},[94,1892,964],{"class":128},[94,1894,138],{"class":111},[94,1896,141],{"class":100},[94,1898,797],{"class":111},[94,1900,1901,1903,1905,1907,1909],{"class":96,"line":703},[94,1902,976],{"class":111},[94,1904,979],{"class":115},[94,1906,218],{"class":111},[94,1908,984],{"class":159},[94,1910,987],{"class":111},[94,1912,1913],{"class":96,"line":708},[94,1914,1915],{"class":111},"      };\n",[94,1917,1918],{"class":96,"line":713},[94,1919,203],{"emptyLinePlaceholder":202},[94,1921,1922,1924],{"class":96,"line":725},[94,1923,264],{"class":100},[94,1925,385],{"class":111},[94,1927,1928,1930,1932],{"class":96,"line":757},[94,1929,391],{"class":111},[94,1931,599],{"class":394},[94,1933,602],{"class":111},[94,1935,1936,1938],{"class":96,"line":781},[94,1937,608],{"class":111},[94,1939,1022],{"class":394},[94,1941,1942,1944,1946,1948],{"class":96,"line":786},[94,1943,1028],{"class":104},[94,1945,404],{"class":100},[94,1947,221],{"class":111},[94,1949,409],{"class":100},[94,1951,1952,1954,1956,1958,1960,1962,1964,1966,1969],{"class":96,"line":800},[94,1953,1040],{"class":104},[94,1955,404],{"class":100},[94,1957,218],{"class":111},[94,1959,931],{"class":128},[94,1961,138],{"class":111},[94,1963,141],{"class":100},[94,1965,938],{"class":115},[94,1967,1968],{"class":111},"(e.target.value)",[94,1970,409],{"class":100},[94,1972,1973,1975,1977],{"class":96,"line":825},[94,1974,1053],{"class":104},[94,1976,530],{"class":100},[94,1978,1058],{"class":159},[94,1980,1981,1983,1985],{"class":96,"line":850},[94,1982,1064],{"class":104},[94,1984,530],{"class":100},[94,1986,1069],{"class":159},[94,1988,1989],{"class":96,"line":866},[94,1990,1075],{"class":111},[94,1992,1993,1995,1997,1999,2001,2003,2005,2007],{"class":96,"line":877},[94,1994,1081],{"class":100},[94,1996,1084],{"class":111},[94,1998,1087],{"class":115},[94,2000,239],{"class":111},[94,2002,498],{"class":128},[94,2004,138],{"class":111},[94,2006,141],{"class":100},[94,2008,385],{"class":111},[94,2010,2011,2013],{"class":96,"line":893},[94,2012,1103],{"class":111},[94,2014,1106],{"class":394},[94,2016,2017,2019,2021,2023],{"class":96,"line":899},[94,2018,1112],{"class":104},[94,2020,404],{"class":100},[94,2022,1117],{"class":111},[94,2024,409],{"class":100},[94,2026,2027,2029,2031,2033],{"class":96,"line":904},[94,2028,1125],{"class":104},[94,2030,404],{"class":100},[94,2032,498],{"class":111},[94,2034,409],{"class":100},[94,2036,2037,2039,2041,2043],{"class":96,"line":910},[94,2038,1137],{"class":104},[94,2040,404],{"class":100},[94,2042,1142],{"class":111},[94,2044,409],{"class":100},[94,2046,2047],{"class":96,"line":916},[94,2048,1150],{"class":111},[94,2050,2051,2053],{"class":96,"line":944},[94,2052,1156],{"class":111},[94,2054,409],{"class":100},[94,2056,2057,2059,2061],{"class":96,"line":950},[94,2058,691],{"class":111},[94,2060,599],{"class":394},[94,2062,602],{"class":111},[94,2064,2065],{"class":96,"line":973},[94,2066,308],{"class":111},[94,2068,2069],{"class":96,"line":990},[94,2070,314],{"class":111},[39,2072,2074],{"id":2073},"comportement","Comportement",[58,2076,2077,2083],{},[61,2078,2079,2082],{},[1240,2080,2081],{},"Sans compilateur"," →  chaque frappe dans le champ re-render ProductList, ce qui re-render tous les ProductCard — et leur boucle de 100 000 itérations. Sur 50\nproduits, c'est 50 traitements lourds à chaque touche, avant même que l'API\nréponde.",[61,2084,2085,2088],{},[1240,2086,2087],{},"Avec compilateur"," → seul Input se re-render pendant la frappe. Les\nProductCard ne se re-rendent plus tant que leurs propriétés n'ont pas changé. Quand l'appel API revient (200ms plus tard), seuls les produits mis à jour se\nre-rendent.",[25,2090,2091],{},"Le compilateur a automatiquement :",[58,2093,2094,2103,2106],{},[61,2095,2096,2097,2099,2100,2102],{},"mémoïsé ",[50,2098,1142],{}," (équivalent ",[50,2101,77],{},")",[61,2104,2105],{},"stabilisé les props de chaque ProductCard (équivalent React.memo)",[61,2107,2108],{},"traité Input comme un composant mémoïsé.",[36,2110],{},[39,2112,2114],{"id":2113},"sous-le-capot-version-simple","Sous le capot (version simple)",[25,2116,2117],{},"Le compilateur analyse ton code au moment du build :",[58,2119,2120,2123,2126],{},[61,2121,2122],{},"transforme le code en graphe de contrôle",[61,2124,2125],{},"identifie les dépendances",[61,2127,2128],{},"ajoute du cache automatiquement",[25,2130,2131,2132,2134],{},"Le compilateur opère au niveau de l'expression — plus fin qu'un ",[50,2133,71],{}," classique. Il peut même mémoïser du code situé après un return conditionnel, ce qui est impossible à faire manuellement (les hooks ne peuvent pas être appelés après un return).",[80,2136,2138],{"id":2137},"résultat-schéma-simplifié","Résultat (schéma simplifié)",[85,2140,2145],{"className":2141,"code":2142,"language":2143,"meta":2144,"style":90},"language-plain shiki shiki-themes github-dark-default","if (cache !== valeur) {\n    \u002F\u002F recalcul\n    cache = valeur;\n} else {\n    \u002F\u002F réutilisation\n}\n","plain","text",[50,2146,2147,2152,2157,2162,2167,2172],{"__ignoreMap":90},[94,2148,2149],{"class":96,"line":97},[94,2150,2151],{},"if (cache !== valeur) {\n",[94,2153,2154],{"class":96,"line":147},[94,2155,2156],{},"    \u002F\u002F recalcul\n",[94,2158,2159],{"class":96,"line":153},[94,2160,2161],{},"    cache = valeur;\n",[94,2163,2164],{"class":96,"line":171},[94,2165,2166],{},"} else {\n",[94,2168,2169],{"class":96,"line":193},[94,2170,2171],{},"    \u002F\u002F réutilisation\n",[94,2173,2174],{"class":96,"line":199},[94,2175,409],{},[36,2177],{},[39,2179,2181],{"id":2180},"ce-que-ça-ne-remplace-pas","Ce que ça ne remplace pas",[25,2183,2184],{},"Le compilateur optimise comment ça render, pas ce que ça render.",[58,2186,2187,2194],{},[61,2188,2189,2190,2193],{},"Virtualisation (si tu affiches 10 000 lignes, render tous les éléments une seule fois reste trop lent. Un ",[1240,2191,2192],{},"sliding window"," (react-virtual, TanStack Virtual) reste nécessaire.)",[61,2195,2196],{},"code splitting \u002F lazy loading - le compilateur n'agit pas sur la taille du\nbundle ni sur le chargement initial.",[36,2198],{},[39,2200,2202],{"id":2201},"les-règles-à-respecter","Les règles à respecter",[25,2204,2205],{},"Le compilateur ignore silencieusement les composants qu'il ne peut pas\nanalyser. Deux patterns le font échouer régulièrement :",[25,2207,2208,2211,2212,2214],{},[50,2209,2210],{},"try\u002Fcatch"," dans le render — le compilateur ne peut pas suivre le flux d'exécution. Solution : déplacer le ",[50,2213,2210],{}," dans une fonction utilitaire appelée depuis le composant.",[25,2216,2217],{},"Déstructuration imbriquée dans la signature :",[85,2219,2221],{"className":87,"code":2220,"language":89,"meta":90,"style":90},"\u002F\u002F ❌\nfunction Component({ items: [first, ...rest] }) {\n  ... \n }\n\n\n\u002F\u002F ✅\nfunction Component({ items }) {\n  const [first, ...rest] = items;\n}\n",[50,2222,2223,2228,2257,2265,2270,2274,2278,2283,2295,2316],{"__ignoreMap":90},[94,2224,2225],{"class":96,"line":97},[94,2226,2227],{"class":325},"\u002F\u002F ❌\n",[94,2229,2230,2232,2235,2237,2240,2243,2246,2248,2251,2254],{"class":96,"line":147},[94,2231,348],{"class":100},[94,2233,2234],{"class":115}," Component",[94,2236,353],{"class":111},[94,2238,2239],{"class":128},"items",[94,2241,2242],{"class":111},": [",[94,2244,2245],{"class":128},"first",[94,2247,132],{"class":111},[94,2249,2250],{"class":100},"...",[94,2252,2253],{"class":128},"rest",[94,2255,2256],{"class":111},"] }) {\n",[94,2258,2259,2262],{"class":96,"line":153},[94,2260,2261],{"class":100},"  ...",[94,2263,2264],{"class":111}," \n",[94,2266,2267],{"class":96,"line":171},[94,2268,2269],{"class":111}," }\n",[94,2271,2272],{"class":96,"line":193},[94,2273,203],{"emptyLinePlaceholder":202},[94,2275,2276],{"class":96,"line":199},[94,2277,203],{"emptyLinePlaceholder":202},[94,2279,2280],{"class":96,"line":206},[94,2281,2282],{"class":325},"\u002F\u002F ✅\n",[94,2284,2285,2287,2289,2291,2293],{"class":96,"line":227},[94,2286,348],{"class":100},[94,2288,2234],{"class":115},[94,2290,353],{"class":111},[94,2292,2239],{"class":128},[94,2294,377],{"class":111},[94,2296,2297,2299,2301,2303,2305,2307,2309,2311,2313],{"class":96,"line":261},[94,2298,332],{"class":100},[94,2300,731],{"class":111},[94,2302,2245],{"class":104},[94,2304,132],{"class":111},[94,2306,2250],{"class":100},[94,2308,2253],{"class":104},[94,2310,741],{"class":111},[94,2312,530],{"class":100},[94,2314,2315],{"class":111}," items;\n",[94,2317,2318],{"class":96,"line":282},[94,2319,409],{"class":111},[25,2321,2322],{},"Pour le reste, les règles de base de React suffisent : composants purs, pas\nd'effets de bord dans le render, state mis à jour uniquement via le setter.",[22,2324,2325],{},[25,2326,2327,2328,2331],{},"⚠️ Activer ",[1240,2329,2330],{},"eslint-plugin-react-compiler"," pour détecter les composants ignorés.",[36,2333],{},[39,2335,2337],{"id":2336},"le-piège-principal-les-échecs-silencieux","Le piège principal : les échecs silencieux",[25,2339,2340],{},"Si le compilateur ne comprend pas, il n’optimise pas et ne dit rien",[25,2342,2343],{},"Résultat : une fausse impression d’optimisation.",[80,2345,2347],{"id":2346},"à-faire-absolument","À faire absolument",[58,2349,2350,2357,2362],{},[61,2351,2352,2353,2356],{},"Activer ",[1240,2354,2355],{},"eslint-plugin-react-hooks"," : il vérifie que tu respectes les règles\ndes hooks (ordre d'appel, tableaux de dépendances corrects, etc.).",[61,2358,2352,2359,2361],{},[1240,2360,2330],{}," : il signale les composants que le\ncompilateur ne peut pas optimiser et explique pourquoi.",[61,2363,2364],{},"vérifier les DevTools → badge “Memo ✨” sur les composants optimisés",[25,2366,2367],{},"Pour aller plus loin, le plugin Babel accepte une option logger qui te permet\nde logguer les composants ignorés pendant le build — pratique pour auditer un\nprojet existant.",[36,2369],{},[39,2371,2373],{"id":2372},"garder-le-contrôle","Garder le contrôle",[25,2375,2376],{},"Le compilateur peut s'utiliser en opt-in ou en opt-out.",[25,2378,2379,2382],{},[1240,2380,2381],{},"Opt-out"," — désactiver le compilateur pour un composant spécifique :",[85,2384,2386],{"className":87,"code":2385,"language":89,"meta":90,"style":90},"function Component() {\n    \"use no memo\";\n}\n",[50,2387,2388,2396,2403],{"__ignoreMap":90},[94,2389,2390,2392,2394],{"class":96,"line":97},[94,2391,348],{"class":100},[94,2393,2234],{"class":115},[94,2395,722],{"class":111},[94,2397,2398,2401],{"class":96,"line":147},[94,2399,2400],{"class":159},"    \"use no memo\"",[94,2402,536],{"class":111},[94,2404,2405],{"class":96,"line":153},[94,2406,409],{"class":111},[25,2408,2409,2412],{},[1240,2410,2411],{},"Opt-in"," progressif — activer le compilateur uniquement sur un dossier via la\nconfig Babel (includes \u002F excludes). Utile pour migrer un projet existant sans tout toucher d'un coup.",[25,2414,2415],{},"Ces deux approches permettent d'adopter le compilateur graduellement, sans avoir à tout valider d'un seul coup.",[36,2417],{},[39,2419,2421],{"id":2420},"performances-réelles","Performances réelles",[25,2423,2424],{},"N sont issus de retours publics de projets ayant adopté le compilateur en production.",[2426,2427,2428,2447],"table",{},[2429,2430,2431],"thead",{},[2432,2433,2434,2438,2441,2444],"tr",{},[2435,2436,2437],"th",{},"Projet",[2435,2439,2440],{},"Métrique",[2435,2442,2443],{},"Résultat",[2435,2445,2446],{},"source",[2448,2449,2450,2468,2483,2500,2517],"tbody",{},[2432,2451,2452,2456,2459,2462],{},[2453,2454,2455],"td",{},"Meta Quest Store",[2453,2457,2458],{},"Interactions",[2453,2460,2461],{},"Jusqu’à  2.5× plus rapide",[2453,2463,2464],{},[1218,2465,2466],{"href":2466,"rel":2467},"https:\u002F\u002Freact.dev\u002Fblog\u002F2025\u002F10\u002F07\u002Freact-compiler-1",[1222],[2432,2469,2470,2472,2475,2478],{},[2453,2471,2455],{},[2453,2473,2474],{},"Chargement initial",[2453,2476,2477],{},"+12%",[2453,2479,2480],{},[1218,2481,2466],{"href":2466,"rel":2482},[1222],[2432,2484,2485,2488,2491,2494],{},[2453,2486,2487],{},"Sanity Studio",[2453,2489,2490],{},"Render\u002F latence",[2453,2492,2493],{},"-20 à -30%",[2453,2495,2496],{},[1218,2497,2498],{"href":2498,"rel":2499},"https:\u002F\u002Fgithub.com\u002Freactwg\u002Freact-compiler\u002Fdiscussions\u002F33",[1222],[2432,2501,2502,2505,2508,2511],{},[2453,2503,2504],{},"Wakelet",[2453,2506,2507],{},"INP",[2453,2509,2510],{},"-15%",[2453,2512,2513],{},[1218,2514,2515],{"href":2515,"rel":2516},"https:\u002F\u002Fgithub.com\u002Freactwg\u002Freact-compiler\u002Fdiscussions\u002F52",[1222],[2432,2518,2519,2521,2524,2527],{},[2453,2520,2504],{},[2453,2522,2523],{},"LCP",[2453,2525,2526],{},"−10% (2,6s → 2,4s)",[2453,2528,2529],{},[1218,2530,2515],{"href":2515,"rel":2531},[1222],[25,2533,2534],{},"Le plus gros gain se situe sur l'interactivité — les actions utilisateurs (clics, saisie, navigation) qui déclenchaient des chaînes de re-renders.",[36,2536],{},[39,2538,2540],{"id":2539},"mon-avis","Mon avis",[25,2542,2543],{},"React Compiler est une évolution, Il présente plusieurs avantages et contributions :",[80,2545,2547],{"id":2546},"avantages","Avantages",[58,2549,2550,2553,2556],{},[61,2551,2552],{},"Un code plus simple",[61,2554,2555],{},"moins de bugs liés aux tableaux de dépendances",[61,2557,2558],{},"optimisation automatique souvent plus fine qu'à la main",[80,2560,2562],{"id":2561},"inconvénients","Inconvénients",[58,2564,2565,2568,2571],{},[61,2566,2567],{},"échecs silencieux",[61,2569,2570],{},"moins de contrôle explicite qu'avant — ce qui peut déstabiliser au début",[61,2572,2573],{},"certaines libs à adapter",[36,2575],{},[39,2577,2579],{"id":2578},"mes-recommandation","Mes Recommandation",[25,2581,2582],{},"Si tu as la chance de démarrer un nouveau projet, active le compilateur dès le début. C'est le cas idéal, tu pars d'une base propre sans comportement existant à préserver.",[25,2584,2585],{},"Dans le cadre d'un projet existant, ce qui est le cas le plus courant, je recommande une adoption progressive, composant par composant. Le compilateur va mémoïser automatiquement du code qui ne l'était pas auparavant : si certains composants avaient des effets de bord reposant implicitement sur les re-renders, leur comportement peut changer de façon silencieuse. Une bascule progressive te permet de valider au fur et à mesure plutôt que de chasser des régressions après une activation globale.",[25,2587,2588],{},"Le badge \"Memo ✨\" dans les DevTools confirme que le compilateur a pris en charge un composant, mais ne garantit pas l'absence de re-renders : si une prop vient d'une lib tierce ou d'une fonction que le compilateur n'a pas pu stabiliser, le composant peut quand même se re-render. Utilise react-scan pour visualiser les re-renders réels.",[39,2590,2592],{"id":2591},"conclusion","Conclusion",[25,2594,2595,2596,2598],{},"Avant : “Est-ce que je dois mettre un ",[50,2597,71],{}," ici ?”",[25,2600,2601],{},"Maintenant : “Est-ce que mon code respecte les règles pour que le compilateur fasse le travail ?”",[25,2603,2604],{},"Le vrai gain, ce n’est pas seulement la performance. C’est de pouvoir se concentrer sur le produit plutôt que sur les optimisations.",[36,2606],{},[2608,2609,2610],"style",{},"html pre.shiki code .suJrU, html code.shiki .suJrU{--shiki-default:#FF7B72}html pre.shiki code .sFSAA, html code.shiki .sFSAA{--shiki-default:#79C0FF}html pre.shiki code .sZEs4, html code.shiki .sZEs4{--shiki-default:#E6EDF3}html pre.shiki code .sc3cj, html code.shiki .sc3cj{--shiki-default:#D2A8FF}html pre.shiki code .sQhOw, html code.shiki .sQhOw{--shiki-default:#FFA657}html pre.shiki code .s9uIt, html code.shiki .s9uIt{--shiki-default:#A5D6FF}html pre.shiki code .sH3jZ, html code.shiki .sH3jZ{--shiki-default:#8B949E}html pre.shiki code .sPWt5, html code.shiki .sPWt5{--shiki-default:#7EE787}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);}",{"title":90,"searchDepth":147,"depth":147,"links":2612},[2613,2616,2619,2623,2624,2625,2628,2629,2630,2633,2634,2635,2639,2640],{"id":41,"depth":147,"text":42,"children":2614},[2615],{"id":82,"depth":153,"text":83},{"id":1203,"depth":147,"text":1204,"children":2617},[2618],{"id":1210,"depth":153,"text":1211},{"id":1228,"depth":147,"text":1229,"children":2620},[2621,2622],{"id":1232,"depth":153,"text":1233},{"id":1386,"depth":153,"text":1387},{"id":1443,"depth":147,"text":1444},{"id":2073,"depth":147,"text":2074},{"id":2113,"depth":147,"text":2114,"children":2626},[2627],{"id":2137,"depth":153,"text":2138},{"id":2180,"depth":147,"text":2181},{"id":2201,"depth":147,"text":2202},{"id":2336,"depth":147,"text":2337,"children":2631},[2632],{"id":2346,"depth":153,"text":2347},{"id":2372,"depth":147,"text":2373},{"id":2420,"depth":147,"text":2421},{"id":2539,"depth":147,"text":2540,"children":2636},[2637,2638],{"id":2546,"depth":153,"text":2547},{"id":2561,"depth":153,"text":2562},{"id":2578,"depth":147,"text":2579},{"id":2591,"depth":147,"text":2592},"2026-05-18T06:58:42.493Z"," > 💡 Depuis que React Compiler est passé en version stable (v1.0, octobre 2025), la question ne se pose plus vraiment : oui, il est prêt pour la production.   > Mais est-ce que ça vaut le coup ? Et e","md",".\u002Fassets\u002Fcover-image.webp",{"mémoïsés par React Compiler\" ogImage":2644},"\u002Fblogs\u002F2026-05-18-react-compiler",[2648,2654,2657,2662],{"id":2649,"name":2650,"image":2651,"linkedin":2652,"x":12,"bio":2653},"67adfd77-4b84-4496-b55d-3391541f59c5","Michaël Bernasinski",".\u002Fassets\u002Freviewer-michael-bernasinski.webp","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fmichael-bernasinski","Principal Lead - Software Engineer - HoppR Lyon",{"id":2655,"name":2656,"image":11,"linkedin":12,"x":12},"188f4462-cd38-80d5-b9e6-ec28a94d11e5","Bastien Dufour",{"id":2658,"name":2659,"image":2660,"linkedin":2661,"x":12},"0bb914a6-f882-4951-bee6-53e8e8abb807","Emmanuelle Gouvart",".\u002Fassets\u002Freviewer-emmanuelle-gouvart.webp","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Femmanuellegouvart-182b6ab2\u002F",{"id":2663,"name":2664,"image":2665,"linkedin":2666,"x":12},"e8163b24-7e01-41c5-adbf-0dc655f929d0","Nicolas Zago",".\u002Fassets\u002Freviewer-nicolas-zago.webp","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fnicolaszago\u002F",{"title":5,"description":2642},"blogs\u002F2026-05-18-react-compiler\u002Findex",[2670,2671,2672],"front-end","performance","others","GOl11cH7PD4gDSQQM7g1rY3tEqaJlecZQkO4dtBKtbA",[2675,2682,2692,2703],{"path":2676,"title":2677,"image":2678,"date":2679,"tags":2680},"\u002Fblogs\u002F2025-04-15-dbrief-react-paris-2025","Débrief React Paris 2025","\u002Fcontent-assets\u002F2025-04-15-dbrief-react-paris-2025\u002Fassets\u002Fcover-image.webp","15 avril 2025",[2681,2670,2672],"événement",{"path":2683,"title":2684,"image":2685,"date":2686,"tags":2687},"\u002Fblogs\u002F2025-09-03-un-ide-avec-agent-ia-une-alternative-open-source-cursor-tout-ce-quil-faut-savoir-pour-bien-dmarrer-avec-void","Un IDE avec agent IA, une alternative Open Source à Cursor : tout ce qu’il faut savoir pour bien démarrer avec Void !","\u002Fcontent-assets\u002F2025-09-03-un-ide-avec-agent-ia-une-alternative-open-source-cursor-tout-ce-quil-faut-savoir-pour-bien-dmarrer-avec-void\u002Fassets\u002Fcover-image.webp","3 septembre 2025",[2672,2688,2689,2690,2691],"documentation","void","ide","ia",{"path":2693,"title":2694,"image":2695,"date":2696,"tags":2697},"\u002Fblogs\u002F2025-05-19-bref-jai-mis-en-place-les-dora-metrics-dans-un-grand-groupe-rex","Bref, j’ai mis en place les DORA Metrics dans un grand groupe ! (REX 🦖)","\u002Fcontent-assets\u002F2025-05-19-bref-jai-mis-en-place-les-dora-metrics-dans-un-grand-groupe-rex\u002Fassets\u002Fcover-image.webp","19 mai 2025",[2698,2699,2700,2701,2702,2671],"dora metrics","devops","cloud-platform","observabilité","cloud",{"path":2704,"title":2705,"image":2706,"date":2707,"tags":2708},"\u002Fblogs\u002F2024-10-31-dora-metrics-valuer-la-performance-de-livraison-logicielle","DORA Metrics : Évaluer la performance de livraison logicielle","\u002Fcontent-assets\u002F2024-10-31-dora-metrics-valuer-la-performance-de-livraison-logicielle\u002Fassets\u002Fcover-image.webp","31 octobre 2024",[2698,2699,2702,2671,2701,2700],1779118356790]