ServerSideRender: Fix data loading in development mode #62140
Merged
Conversation
This file contains 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
Mamaduka
added
[Type] Bug
|
Size Change: -8 B (0%) Total Size: 1.74 MB
ℹ️ View Unchanged
|
ellatrix
reviewed
May 30, 2024
| @@ -165,6 +170,9 @@ export default function ServerSideRender( props ) { | |||
| fetchRequest === fetchRequestRef.current | |||
There was a problem hiding this comment.
I guess to be completely correct, we should cancel the fetch request if the component unmounts? Then we also don't need a mount ref?
There was a problem hiding this comment.
I tried only to change what was necessary for the fix + minor colocation.
If you ask me, this whole component needs proper refactoring 😅
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
tyxla
reviewed
May 30, 2024
| @@ -165,6 +170,9 @@ export default function ServerSideRender( props ) { | |||
| fetchRequest === fetchRequestRef.current | |||
| ) { | |||
| setIsLoading( false ); | |||
| // Cancel the timeout to show the Spinner. | |||
| setShowLoader( false ); | |||
There was a problem hiding this comment.
Why do we need to setShowLoader( false ) on cleanup? Feels odd to set the state on unmounting, since we won't be using that state.
Scratch this, I was looking at the wrong place and thought this was running in an effect.
tyxla
reviewed
May 30, 2024
| @@ -98,7 +98,7 @@ export default function ServerSideRender( props ) { | |||
| LoadingResponsePlaceholder = DefaultLoadingResponsePlaceholder, | |||
| } = props; | |||
|
|
|||
| const isMountedRef = useRef( true ); | |||
| const isMountedRef = useRef( false ); | |||
There was a problem hiding this comment.
But it did mount already, didn't it? Unless I misunderstand something, this looks wrong - can you elaborate?
There was a problem hiding this comment.
Setting the initial value doesn't mean that the component was mounted. React can call a component (function) for other reasons without mounting it.
This is a common (anti)pattern when you want to run synchronization only after the initial mount.
const didMount = useRef( false );
useEffect( () => {
didMount.current = true;
return () => { didMount.current = false };
}, [] );There was a problem hiding this comment.
@tyxla, I think this is the third issue I fixed for a similar pattern. I explained why the original implementations were failing in development mode here: #62141 (comment).
There was a problem hiding this comment.
Ah, of course, got it. Wow, this component is messy 😉
There was a problem hiding this comment.
Yeah, it's bit of noodle soup 🍜
tyxla
approved these changes
May 30, 2024
|
Thanks for testing and reviews, folks! As for refactoring, @kevin940726 proposed hook API for this feature, which should give consumers more control. See #35294 (comment). |
carstingaxion
pushed a commit
to carstingaxion/gutenberg
that referenced
this pull request
Jun 4, 2024
* ServerSideRender: Fix data loading in development mode * Colocate the loading state handlers * Remove leftover testing code Co-authored-by: Mamaduka <[email protected]> Co-authored-by: ellatrix <[email protected]> Co-authored-by: tyxla <[email protected]>
patil-vipul
pushed a commit
to patil-vipul/gutenberg
that referenced
this pull request
Jun 17, 2024
* ServerSideRender: Fix data loading in development mode * Colocate the loading state handlers * Remove leftover testing code Co-authored-by: Mamaduka <[email protected]> Co-authored-by: ellatrix <[email protected]> Co-authored-by: tyxla <[email protected]>
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.
What?
Related #61943.
PR fixes the
ServerSideRendercomponent but is in development mode, where it was stuck in a loading state.Why?
React runs effects extra time in
StrictMode, and the previousisMountedlogic didn't account for this.How
isMountedref value in the existing effect instead of relying on the initial value.Testing Instructions
https://make.wordpress.org/design/.Patch for enabling modes
Testing Instructions for Keyboard
Same.
Screenshots or screencast
CleanShot.2024-05-30.at.15.55.48.mp4