Skip to content

withErrorBoundary create unnecessary rerenders #17183

@OoDeLally

Description

@OoDeLally

Is there an existing issue for this?

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/react

SDK Version

8.55.0

Framework Version

8.55.0

Link to Sentry event

No response

Reproduction Example/SDK Setup

export const MyScreenWithFallback = Sentry.withErrorBoundary(MyScreen, {
  fallback: FatalErrorFallback,
});

Steps to Reproduce

  1. Run this with dummy components

Expected Result

MyScreenWithFallback does not rerender when props are identical.

Actual Result

MyScreenWithFallback rerenders everytime.

Workaround

export const MyScreenWithFallback = React.memo(Sentry.withErrorBoundary(MyScreen, {
  fallback: FatalErrorFallback,
}));

Real solution

function withErrorBoundary(
  WrappedComponent,
  errorBoundaryOptions,
) {
  const componentDisplayName = WrappedComponent.displayName || WrappedComponent.name || UNKNOWN_COMPONENT;
  const Wrapped = React.memo(((props) => React.createElement(ErrorBoundary, { ...errorBoundaryOptions,}
      , React.createElement(WrappedComponent, { ...props,} )
    )
  ));

  Wrapped.displayName = `errorBoundary(${componentDisplayName})`;

  // Copy over static methods from Wrapped component to Profiler HOC
  // See: https://reactjs.org/docs/higher-order-components.html#static-methods-must-be-copied-over
  hoistNonReactStatics(Wrapped, WrappedComponent);
  return Wrapped;
}

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

Status

Waiting for: Product Owner

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions