Skip to content

ui: adopt eslint-plugin-react-compiler to enforce compiler-compilable code #577

Description

Follow-up from #575 review.

Several React Compiler bailout fixes in #575 depend on hook declaration order (e.g. commitOverlaysRef declared before its capturers in ui/src/hooks/compositorOverlays.ts, the auto-layout effect moved below the callbacks that set its pending flags in ui/src/views/DesignView.tsx). These constraints are currently guarded only by prose comments — a future edit or auto-sorter that reorders hooks would silently reintroduce a bailout. The compositor hooks have render-perf tests that would likely catch it; DesignView's restructured sites (stableSelectedNode, auto-layout effect, setRightPaneView adjustment) have no equivalent guard.

Proposal: add eslint-plugin-react-compiler to the UI lint setup so bailouts are flagged at the source in just lint-ui/CI. Note the codebase still has ~109 known bailout sites outside #575's scope, so the rule may need to start as a warning (or with targeted overrides) and be ratcheted to an error as bailouts are burned down.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions