Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ServerSideRender refreshes more than usual with custom response situations #32998

Closed
amir2mi opened this issue Jun 25, 2021 · 4 comments
Closed
Labels
[Package] Server Side Render /packages/server-side-render

Comments

@amir2mi
Copy link
Contributor

amir2mi commented Jun 25, 2021

ServerSideRender generally refreshes the content on changing attributes.
It gives three options LoadingResponsePlaceholder ,EmptyResponsePlaceholder and ErrorResponsePlaceholder , that developers can render custom element for them.

But they make too many requests to refresh, on hover , on blur or on focus it will refresh the result without any reason I checked that happens when one or more of mentioned options are used.

The comparison makes the problem clear:

This is the code I'm using here:

<ServerSideRender
     ...
     LoadingResponsePlaceholder={() => {
         return <img src="https://i.gifer.com/origin/fd/fdf70f5f4989f9c08f033da50c38170e.gif" alt=""/>
     }}
     ...
/>

In this video does not have any of them.

before.mp4

It happen when any of them has custom HTML:

after.any.of.them.mp4
@Mamaduka Mamaduka added the [Package] Server Side Render /packages/server-side-render label Jun 28, 2021
@Mamaduka
Copy link
Member

Hi, @amir2mi

Passing a function for those props doesn't work so well, as React treats that as a new component on every render. The ServerSideRender compares props to re-fetch data, and the component is refreshed more often.

} else if ( ! isEqual( prevProps, props ) ) {
debouncedFetchData();
}

I would recommend extracting your custom placeholder in components and passing them as props.

function MyLoadingPlaceholder() {
	return <img src="https://i.gifer.com/origin/fd/fdf70f5f4989f9c08f033da50c38170e.gif" alt=""/>;
}

function MyServerSideRenderer() {
	return (
		<ServerSideRender
			LoadingResponsePlaceholder={ MyLoadingPlaceholder }
		/>
	);
}

@amir2mi
Copy link
Contributor Author

amir2mi commented Jun 28, 2021

Hi @Mamaduka, Thanks for the tip! That solved the problem I unfortunately did not pay much attention to default placeholders.
Does not it worth mention or add this in documentation?

@Mamaduka
Copy link
Member

Happy to hear that.

I already created PR for documentation update - #33030.

@amir2mi
Copy link
Contributor Author

amir2mi commented Jun 28, 2021

Thanks again so I close this issue.

@amir2mi amir2mi closed this as completed Jun 28, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Server Side Render /packages/server-side-render
Projects
None yet
Development

No branches or pull requests

2 participants