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', () => {