---
url: /docs/guide/usage/linter/rules/react/error-boundaries.md
---

### What it does

Validates using error boundaries instead of `try`/`catch` around JSX
for errors in child components.

Powered by the React Compiler, which runs once per file and is shared
with the other React Compiler rules. Port of
[`react-hooks/error-boundaries`](https://react.dev/reference/eslint-plugin-react-hooks/lints/error-boundaries).

### Why is this bad?

React renders components lazily — the child has not rendered yet
inside the `try` block, so the `catch` never sees its errors; only an
error boundary can catch them.

### Examples

Examples of **incorrect** code for this rule:

```jsx
function Component(props) {
  let el;
  try {
    el = <Child />;
  } catch {
    return null;
  }
  return el;
}
```

Examples of **correct** code for this rule:

```jsx
function Component(props) {
  return (
    <ErrorBoundary fallback={null}>
      <Child />
    </ErrorBoundary>
  );
}
```

## How to use

## Version

This rule was added in v1.79.0.

## References