react-hooks-js/error-boundaries

Validates usage of error boundaries instead of try/catch for errors in child components

• Category: React Compiler
• Severity: error
• Source: eslint-plugin-react-hooks
• Framework: global
• Enabled when: eslint-plugin-react-hooks v6+ installed AND React Compiler detected in project
• Documentation: https://react.dev/reference/eslint-plugin-react-hooks/lints/error-boundaries

Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

Fires when a try/catch wraps a child component render (try { return <Child /> }) or wraps a use(promise) call — render errors and Suspense thenables bubble through the catch block invisibly, so neither pattern actually handles failure. False positive: try/catch around imperative work inside an event handler, useEffect body, or async helper — not around the JSX return statement itself.

Fix prompt

Use this once validation confirms the diagnostic is real.

For render errors, wrap the subtree in a real React error boundary — react-error-boundary's <ErrorBoundary fallback={...}> or your own class with componentDidCatch + getDerivedStateFromError. Pair it with <Suspense> around use(promise) so loading (Suspense) and error (boundary) states each have a fallback. See https://react.dev/reference/eslint-plugin-react-hooks/lints/error-boundaries