fix(colorpicker): prevent infinite rerender in React v18 Legacy mode #1616
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.
Description
With React v18 - Legacy mode (mounting with
ReactDOM.render()
), there is a chance thatcolorpicker
will rerender infinitely when a new color is picked viaColorWell
.Reproducible:
https://codesandbox.io/s/quizzical-franklin-fxq9zy?file=/src/Example.tsx
Detail
We fix this by updating local state when
color
props changed in the same rendering cycle, instead of usinguseEffect
.Docs:
https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
These changes can be tested via this sandbox https://codesandbox.io/s/garden-color-picker-new-lgm7s7:
src/new-garden-color-picker.js
file is copied frompackages/colorpickers/dist/index.esm.js
, which is built from this branchColorPicker
from the above file instead of@zendeskgarden/react-colorpickers
Checklist
π design updates will be Garden Designer approved (add the designer as a reviewer)π demo is up-to-date (yarn start
)β¬ οΈ renders as expected with reversed (RTL) directionπ€ renders as expected with Bedrock CSS (?bedrock
)πββοΈ includes new unit tests. Maintain existing coverage (always >= 96%)βΏ tested for WCAG 2.1 AA accessibility compliance