--- title: I let React Compiler handle memoization: Here’s what... description: A hands-on account of migrating a production Next.js app to React Compiler v1.0, documenting real breakages encountered along the way. The two main failure... canonical: https://daily.dev/posts/i-let-react-compiler-handle-memoization-here-s-what-actually-broke-gzgm3acvh twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: I let React Compiler handle memoization: Here’s what actually broke | daily.dev og:description: A hands-on account of migrating a production Next.js app to React Compiler v1.0, documenting real breakages encountered along the way. The two main failure... og:url: https://daily.dev/posts/i-let-react-compiler-handle-memoization-here-s-what-actually-broke-gzgm3acvh og:image: https://api.daily.dev/og/posts/gZgm3acvh.png og:image:alt: I let React Compiler handle memoization: Here’s what actually broke og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # I let React Compiler handle memoization: Here’s what actually broke **[LogRocket](https://daily.dev/sources/logrocket)** · 11 min read · 58 upvotes · 5 comments ## Summary A hands-on account of migrating a production Next.js app to React Compiler v1.0, documenting real breakages encountered along the way. The two main failure modes were: React Hook Form's watch() function freezing live previews due to interior mutability incompatibility (fixed with a 'use no memo' wrapper), and stale data in Chart.js click handlers after removing useCallback (which had been masking a timing issue). The post clarifies that the React DevTools Memo badge signals the compiler processed a component, not that optimization succeeded. It also provides guidance on when to keep useMemo/useCallback versus deleting them, and recommends a step-by-step migration order: install and fix lint rules first, then enable the compiler, then audit incompatible libraries. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### Why does React Hook Form's watch() stop updating the UI after enabling React Compiler? React Hook Form's watch() function relies on interior mutability that the compiler cannot safely memoize, which causes watched values to stop triggering re-renders consistently. The eslint-plugin-react-hooks incompatible-library rule flags this. The fix is wrapping useForm in a helper function marked with the "use no memo" directive so the compiler skips memoizing it. _Anyone pairing react hook form with the react compiler can track migration gotchas like this via daily.dev._ ### Is it safe to delete useCallback hooks after enabling React Compiler? Not always. Removing a useCallback around a Chart.js click handler caused stale data in click handlers because the hook had been stabilizing the handler's identity for an effect that re-registers the chart. This wasn't a compiler bug but a timing issue the manual memoization had been masking, so the useCallback had to be restored with a comment explaining why. _Developers cleaning up memoization hooks can compare these edge cases on daily.dev before ripping code out._ ### Does the DevTools Memo badge confirm that React Compiler successfully optimized a component? No, the badge only indicates the compiler processed the component, not that optimization actually succeeded. A component that mutates a prop directly, violating a React rule, still showed the badge despite the linter flagging it with an error. The badge disappears only when a component is explicitly opted out via the "use no memo" directive. _Teams verifying real optimization gains from react compiler can dig into details like this on daily.dev._ ## Community discussion Top comments from developers on daily.dev. **@yaireo** · 7 upvotes > I did this on a complex B2B product with hundreds of components and it went well no problems. No `NextJS` (I despise this monstrous thing) **@confidentcoding** · 4 upvotes > Hooray, a non-AI coding article! That was genuinely helpful. > >  **@pdfopsdev** · 4 upvotes > The chart handler you couldn't delete is the textbook useEffectEvent case: it gives a stable function identity (Chart.js registers once) that still reads the latest data without being a dep. Putting useCallback back works, but the handler still changes whenever onPointClick does and re-registers the effect — useEffectEvent drops it from the deps entirely and keeps one handler for the chart's lifetime. It's the 'stable reference + fresh values' primitive the useCallback was only approximating. ## Similar posts on daily.dev - [React 20: New Compiler and useMemo Changes](https://daily.dev/posts/react-20-new-compiler-and-usememo-changes-7ghtygc1e) · SitePoint · 4 upvotes · 0 comments - [The React Compiler Just Made Your Memoization Knowledge Obsolete. Here’s What to Learn Instead.](https://daily.dev/posts/the-react-compiler-just-made-your-memoization-knowledge-obsolete-here-s-what-to-learn-instead--sfdrxwm6z) · Medium · 64 upvotes · 6 comments - [React Compiler Explained: Do You Still Need useMemo, useCallback, and React.memo?](https://daily.dev/posts/react-compiler-explained-do-you-still-need-usememo-usecallback-and-react-memo--4dhnwgumi) · Syncfusion · 31 upvotes · 1 comments - [The React Compiler](https://daily.dev/posts/the-react-compiler-9txqkrlpw) · Neciu Dan · 2 upvotes · 0 comments - [React 19 Compiler: What Senior Developers Need to Know](https://daily.dev/posts/react-19-compiler-what-senior-developers-need-to-know-smq3uiudw) · SitePoint · 88 upvotes · 6 comments --- Tags: [#react](https://daily.dev/tags/react), [#nextjs](https://daily.dev/tags/nextjs) [View this post on daily.dev](https://daily.dev/posts/i-let-react-compiler-handle-memoization-here-s-what-actually-broke-gzgm3acvh) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"I let React Compiler handle memoization: Here’s what actually broke","url":"https://daily.dev/posts/i-let-react-compiler-handle-memoization-here-s-what-actually-broke-gzgm3acvh","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/i-let-react-compiler-handle-memoization-here-s-what-actually-broke-gzgm3acvh"},"datePublished":"2026-07-07T10:58:19.116Z","dateModified":"2026-09-14T06:59:26.972Z","description":"A hands-on account of migrating a production Next.js app to React Compiler v1.0, documenting real breakages encountered along the way. The two main failure...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/05e59f6b2259bc563d3f5b7b0bf85dde?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/05e59f6b2259bc563d3f5b7b0bf85dde?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"LogRocket","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"LogRocket","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/logrocket","url":"https://daily.dev/sources/logrocket"},"commentCount":5,"discussionUrl":"https://daily.dev/posts/i-let-react-compiler-handle-memoization-here-s-what-actually-broke-gzgm3acvh","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":58},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":5}],"keywords":"react,nextjs","timeRequired":"PT11M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"LogRocket","item":"https://daily.dev/sources/logrocket"},{"@type":"ListItem","position":3,"name":"I let React Compiler handle memoization: Here’s what actually broke"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/i-let-react-compiler-handle-memoization-here-s-what-actually-broke-gzgm3acvh","comment":[{"@type":"Comment","text":"I did this on a complex B2B product with hundreds of components and it went well no problems. No NextJS (I despise this monstrous thing)","datePublished":"2026-07-07T11:54:45.769Z","url":"https://daily.dev/posts/gZgm3acvh#c-3LY7tpuoQ","author":{"@type":"Person","name":"Yair Even Or","url":"https://daily.dev/yaireo","image":"https://avatars.githubusercontent.com/u/845031?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":7}},{"@type":"Comment","text":"Hooray, a non-AI coding article! That was genuinely helpful.","datePublished":"2026-07-08T14:26:47.013Z","dateModified":"2026-07-08T14:28:56.680Z","url":"https://daily.dev/posts/gZgm3acvh#c-zjL44GeJc","author":{"@type":"Person","name":"Lars Faye | Confident Coding","url":"https://daily.dev/confidentcoding","image":"https://media.daily.dev/image/upload/s--OGZu5DEc--/f_auto/v1772569630/avatars/avatar_umWZ9aQAng34qk5aaJl2q?_a=BAMAMiiu0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4}},{"@type":"Comment","text":"The chart handler you couldn’t delete is the textbook useEffectEvent case: it gives a stable function identity (Chart.js registers once) that still reads the latest data without being a dep. Putting useCallback back works, but the handler still changes whenever onPointClick does and re-registers the effect — useEffectEvent drops it from the deps entirely and keeps one handler for the chart’s lifetime. It’s the ‘stable reference + fresh values’ primitive the useCallback was only approximating.","datePublished":"2026-07-07T18:11:23.230Z","url":"https://daily.dev/posts/gZgm3acvh#c-WDC8T4Scw","author":{"@type":"Person","name":"PDFops","url":"https://daily.dev/pdfopsdev","image":"https://media.daily.dev/image/upload/s---8isRBKc--/f_auto/v1782922291/avatars/avatar_orjMeK8QKaaVZwGq7ScPz?_a=BAMAMicg0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/i-let-react-compiler-handle-memoization-here-s-what-actually-broke-gzgm3acvh#faq","mainEntity":[{"@type":"Question","name":"Why does React Hook Form's watch() stop updating the UI after enabling React Compiler?","acceptedAnswer":{"@type":"Answer","text":"React Hook Form's watch() function relies on interior mutability that the compiler cannot safely memoize, which causes watched values to stop triggering re-renders consistently. The eslint-plugin-react-hooks incompatible-library rule flags this. The fix is wrapping useForm in a helper function marked with the \"use no memo\" directive so the compiler skips memoizing it. Anyone pairing react hook form with the react compiler can track migration gotchas like this via daily.dev."}},{"@type":"Question","name":"Is it safe to delete useCallback hooks after enabling React Compiler?","acceptedAnswer":{"@type":"Answer","text":"Not always. Removing a useCallback around a Chart.js click handler caused stale data in click handlers because the hook had been stabilizing the handler's identity for an effect that re-registers the chart. This wasn't a compiler bug but a timing issue the manual memoization had been masking, so the useCallback had to be restored with a comment explaining why. Developers cleaning up memoization hooks can compare these edge cases on daily.dev before ripping code out."}},{"@type":"Question","name":"Does the DevTools Memo badge confirm that React Compiler successfully optimized a component?","acceptedAnswer":{"@type":"Answer","text":"No, the badge only indicates the compiler processed the component, not that optimization actually succeeded. A component that mutates a prop directly, violating a React rule, still showed the badge despite the linter flagging it with an error. The badge disappears only when a component is explicitly opted out via the \"use no memo\" directive. Teams verifying real optimization gains from react compiler can dig into details like this on daily.dev."}}]} ```