fix(agenda): Prevent infinite loop in ReservationList #2737
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The componentDidUpdate method was using a shallow prop comparison (prevProps !== this.props), causing an infinite re-render loop if unstable props like a theme object were passed. This change replaces the shallow comparison with a specific check on the props that should trigger a data update (, ), resolving the 'Maximum update depth exceeded' error.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🐞 Bug Report
Fixes an issue where the
Agendacomponent can enter an infinite re-render loop, causing a "Maximum update depth exceeded" error.The Problem
The
componentDidUpdatelifecycle method inReservationListuses a shallow prop comparison (prevProps !== this.props). This causes the component to update unconditionally if any prop is an object or function that is not memoized (e.g.,theme,renderItem,style). This makes the component highly prone to infinite loops, especially for new users or when used with modern React patterns.The Solution
This PR replaces the unstable shallow prop comparison with a more specific check that only triggers an update when the props that actually affect the reservation data have changed:
itemsandselectedDay.This change makes the component more resilient and prevents the infinite loop without requiring the consuming developer to memoize every single prop passed to
<Agenda>.How to Reproduce the Bug
<Agenda>implementation.themeobject as an inline object literal:theme={{ backgroundColor: 'white' }}.How This PR Fixes It
By changing the comparison logic, the component now correctly ignores changes to stable props like
themeand only re-calculates reservations when necessary.I encountered this issue while building a new app and believe this change will improve the stability of the
Agendacomponent for many users. Thank you for your consideration!