Did a small test with React Compiler today. I turned on the compiler lint rules in one of my projects and checked a form component. Here's what happened: 1. try/finally The first warning said the compiler can't handle a try/finally block yet. So it skipped the whole component. 2. watch() from react-hook-form I removed the finally block to test, and a new warning showed up. watch() returns values that change behind the same function, so React can't tell when something changed. The compiler skips the component again to avoid showing old values. The fix is useWatch(). 3. setState inside useEffect After switching to useWatch(), the compiler could finally read the component, and it found an actual error: I was resetting state inside a useEffect, which causes an extra render. The interesting part: That setState rule was already on in my ESLint config, set to error. But my normal lint showed 0 errors, because the component was being skipped the whole time. So a clean lint doesn't always mean your code was checked. If the compiler skips a component, the rules that depend on it get skipped too, without telling you. #ReactJS #ReactCompiler #NextJS #JavaScript
The part about ESLint showing 0 errors because the compiler was silently skipping the component is the real takeaway, Moteeb. A clean lint on a skipped component gives a false sense of safety. The watch() to useWatch() switch is one I'd flag in every react-hook-form codebase before turning the compiler on.
Senior Full-Stack & React Native Developer | React · Next.js · Node.js · GraphQL | Remote (EU-based) | Web · Mobile · Browser Extensions
3wTwo ways to make those skips visible instead of silent. In the browser, React DevTools puts a "Memo" badge on components the compiler actually compiled, so a form without the badge is one it skipped. In the build, the compiler's logger reports every CompileError, and the docs suggest a stricter panicThreshold only for development, never for the production build. A dev or CI step that prints that list turns "0 lint errors" back into a number you can trust.