Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 30 additions & 1 deletion src/content/learn/react-compiler/debugging.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,35 @@ Common scenarios where this occurs:
- **Dependency arrays that need stable references** - When unstable dependencies cause effects to fire too often or create infinite loops
- **Conditional logic based on reference checks** - When code uses referential equality checks for caching or optimization

## Unsupported Syntax {/*unsupported-syntax*/}

A few syntax patterns are not supported inside `try/catch` statements yet. When React Compiler encounters one of them, it skips the whole component instead of compiling it:

- **Conditional expressions** - ternaries (`condition ? a : b`) and the logical operators `&&`, `||`, and `??`
- **Optional chaining** - `object?.property`
- **`throw` statements**
- **Loops** - `for`, `for...of`, and `while` loops

These patterns are fully supported outside of `try/catch`, so moving them out of the `try/catch` (or extracting the fallible code into a separate function) restores compilation:

```js
function WeatherReport({report}) {
// ✅ Good: computed outside of try/catch
const description = report.temperature > 30 ? "Warm" : "Mild";

let summary = null;
try {
summary = parseSummary(report.data);
} catch (error) {
summary = "Report unavailable";
}

return <div>{description}: {summary}</div>;
}
```

Skipped components still build and run normally, so the only difference is that they are not optimized. To notice them, check that the component shows the ✨ badge in React DevTools, or log skipped components with the [`logger`](/reference/react-compiler/logger) option.

## Debugging Workflow {/*debugging-workflow*/}

Follow these steps when you encounter issues:
Expand Down Expand Up @@ -90,4 +119,4 @@ If you believe you've found a compiler bug:
## Next Steps {/*next-steps*/}

- Review the [Rules of React](/reference/rules) to prevent issues
- Check the [incremental adoption guide](/learn/react-compiler/incremental-adoption) for gradual rollout strategies
- Check the [incremental adoption guide](/learn/react-compiler/incremental-adoption) for gradual rollout strategies
Loading