What is the difference between errorElement and ErrorBoundary?

[ondrejsevcik]

I'm trying to understand what is the difference between errorElement and ErrorBoundary props on a route definition.

The official docs does not help much.

If you do not wish to specify a React element (i.e., errorElement={}) you may specify an ErrorBoundary component instead (i.e., ErrorBoundary={MyErrorBoundary}) and React Router will call createElement for you internally.

When should I choose errorElement and when ErrorBoundary?

Thank you

[kiliman]

errorElement expects a React element, like errorElement={<MyErrorBoundary/>}, whereas ErrorBoundary expects a component reference (function or class), which will then be used to call createElement: ErrorBoundary={MyErrorBoundary}.

As for when to choose, it really depends on how you reference your components. The nice thing about elements, is that you can pass in props that React Router doesn't know about, including children.

This is essentially the same as element vs Component
https://reactrouter.com/en/main/route/route#elementcomponent

[ondrejsevcik]

Thank you. This helps a little bit.

Why do both exists? Is it some relic from the past? It's hard for me to believe that they both exist because one can be referenced by instance vs the other one by reference.

Is there any difference in behavior of the router if I use errorElement vs ErrorBounday? Or they are 100% same when it comes to error handling?

[luane-aquino]

Don't know if it helps and it does lacks more detail but seems to help a little: "In summary, choose errorElement when dealing with route-specific errors in React Router, and use ErrorBoundary for more general error handling throughout your application."

And how I am using is this way (don't know if is the correct way, please let me know): If you are using React Router's Loader or Action, then use ErrorElement, otherwise use react-error-boundary

[Henry-Hong]

@kiliman
Are there any specific reason that you mentioned,

"The nice thing about elements, is that you can pass in props that React Router doesn't know about, including children." ?

Why is it important for React Router to know children of element? Is there any optimization logic or something?