perf(ui): do not re-animate drawer on re-render, reduce useEffects #12743
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
…rs, reduce useEffect triggers
jacobsfletch
approved these changes
Jun 10, 2025
elliott-w
pushed a commit
to elliott-w/payload
that referenced
this pull request
Jun 12, 2025
…ayloadcms#12743) Previously, every time the drawer re-rendered a new entry animation may be triggered. This PR fixes this by setting the open state to `modalState[slug]?.isOpen` instead of `false`. Additionally, I was able to simplify this component while maintaining functionality. Got rid of one `useEffect` and one `useState` call. The remaining useEffect also runs less often (previously, it ran every time `modalState` changed => it re-ran if _any_ modal opened or closed, not just the current one)
|
🚀 This is included in version v3.43.0 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Previously, every time the drawer re-rendered a new entry animation may be triggered. This PR fixes this by setting the open state to
modalState[slug]?.isOpeninstead offalse.Additionally, I was able to simplify this component while maintaining functionality. Got rid of one
useEffectand oneuseStatecall. The remaining useEffect also runs less often (previously, it ran every timemodalStatechanged => it re-ran if any modal opened or closed, not just the current one)