Understanding error boundaries

Error boundaries can be placed in many different fashions, and each approach has its own benefits. Choose one that fits your use case. For ideas, skip to the next section. Here, we will demonstrate how the app behaves, depending on the placement of the error boundaries.

This first example uses two error boundaries around the LikeCounter component. If one of the LikeCounter components crashes, the other one will still be shown:

...
    <AppErrorBoundary>
        <LikeCounter />
 </AppErrorBoundary>
 <AppErrorBoundary>
        <LikeCounter />
 </AppErrorBoundary>
...

This second example uses one ErrorBoundary around two LikeCounter components. If one crashes, the other one will also be replaced by ErrorBoundary:

...
    <AppErrorBoundary>
        <LikeCounter />
        <LikeCounter />
 </AppErrorBoundary>
...