diff --git a/packages/react/src/errorboundary.tsx b/packages/react/src/errorboundary.tsx
index e3f94b441ee6..9c5afde6e8ec 100644
--- a/packages/react/src/errorboundary.tsx
+++ b/packages/react/src/errorboundary.tsx
@@ -222,11 +222,11 @@ function withErrorBoundary
>(
): React.FC
{
const componentDisplayName = WrappedComponent.displayName || WrappedComponent.name || UNKNOWN_COMPONENT;
- const Wrapped: React.FC
= (props: P) => (
+ const Wrapped: React.FC
= React.memo((props: P) => (
- );
+ ));
Wrapped.displayName = `errorBoundary(${componentDisplayName})`;
diff --git a/packages/react/test/errorboundary.test.tsx b/packages/react/test/errorboundary.test.tsx
index 275faa4e2079..6716fb9447c4 100644
--- a/packages/react/test/errorboundary.test.tsx
+++ b/packages/react/test/errorboundary.test.tsx
@@ -96,6 +96,75 @@ describe('withErrorBoundary', () => {
const Component = withErrorBoundary(() =>
Hello World
, { fallback: fallback
});
expect(Component.displayName).toBe(`errorBoundary(${UNKNOWN_COMPONENT})`);
});
+
+ it('should not rerender when props are unchanged', () => {
+ let renderCount = 0;
+ const TestComponent = (props: { value: number }) => {
+ renderCount++;
+ return Value: {props.value}
;
+ };
+
+ const WrappedComponent = withErrorBoundary(TestComponent, { fallback: fallback
});
+
+ // Create a parent component that can trigger rerenders
+ const ParentComponent = () => {
+ const [parentState, setParentState] = useState(0);
+ return (
+
+
+
Parent State: {parentState}
+
+
+ );
+ };
+
+ render();
+
+ // Initial render should have rendered the test component
+ expect(renderCount).toBe(1);
+ expect(screen.getByTestId('test-component')).toHaveTextContent('Value: 42');
+
+ // Trigger parent rerender
+ fireEvent.click(screen.getByText('Parent Rerender'));
+
+ // The wrapped component should not have rerendered since props didn't change
+ expect(renderCount).toBe(1);
+ expect(screen.getByTestId('test-component')).toHaveTextContent('Value: 42');
+ });
+
+ it('should rerender when props change', () => {
+ let renderCount = 0;
+ const TestComponent = (props: { value: number }) => {
+ renderCount++;
+ return Value: {props.value}
;
+ };
+
+ const WrappedComponent = withErrorBoundary(TestComponent, { fallback: fallback
});
+
+ // Create a parent component that can change the props
+ const ParentComponent = () => {
+ const [value, setValue] = useState(42);
+ return (
+
+
+
+
+ );
+ };
+
+ render();
+
+ // Initial render
+ expect(renderCount).toBe(1);
+ expect(screen.getByTestId('test-component')).toHaveTextContent('Value: 42');
+
+ // Change the prop value
+ fireEvent.click(screen.getByText('Change Value'));
+
+ // The wrapped component should have rerendered since props changed
+ expect(renderCount).toBe(2);
+ expect(screen.getByTestId('test-component')).toHaveTextContent('Value: 43');
+ });
});
describe('ErrorBoundary', () => {