ui: Enable React compiler and fix compiler lint violations#6289
ui: Enable React compiler and fix compiler lint violations#6289
Conversation
Ensure URL state syncs correctly with the React Compiler enabled. Navbar now reads URL params via useLocation() instead of window.location.search, and Profiles opts out of memoization so URLStateProvider's sync-from-URL effect fires on navigation.
|
✅ Meticulous spotted 0 visual differences across 338 screens tested: view results. Meticulous evaluated ~4 hours of user flows against your PR. Expected differences? Click here. Last updated for commit |
| prevEnforcedProfileName !== enforcedProfileName || | ||
| prevQueryExpression !== querySelection.expression | ||
| ) { | ||
| setPrevEnforcedProfileName(enforcedProfileName); |
There was a problem hiding this comment.
Just curious, do react compiler allow set states in the render block as norm?
There was a problem hiding this comment.
Yes, this is actually the React-recommended pattern for adjusting state during rendering based on prop changes.
The key requirement is that the setState call is guarded by a condition (lines 217-220), so it doesn't trigger on every render, just when the props actually change. The React compiler understands this pattern and handles it correctly.
| babel: { | ||
| plugins: [ | ||
| [ | ||
| 'babel-plugin-react-compiler', |
There was a problem hiding this comment.
Wondering if we should do this at the component packages level too? So that the benefits gets passed on to the downstream projects too.
Might have to change the lightweight tsc only build for those packages then.
There was a problem hiding this comment.
Good point! Currently the shared packages all use tsc for builds, so the compiler only runs at the app level via Vite.
To enable it at the package level, we'd need to add Babel to the build pipeline for the React-heavy packages (components, profile, icons, hooks, dynamicsize).
I'll put up a follow-up PR for this, I want to keep this one focused on enabling the compiler at the app level and fixing the lint violations.
This enables React Compiler for the Parca web app and updates the codebase to satisfy the new compiler-aware React rules.
Changes
Some components are intentionally opted out because they rely on DOM measurement or third-party APIs that are not good compiler candidates right now. Those components/hooks are marked with
"use no memo", so React Compiler is enabled for the app but not every component is compiled.I was worried about build time increasing because of the switch to the Babel plugin, but that does not appear to be the case on Vercel.
Follow ups for this would be:
useMemo,useCallback,memohooks.