feat: Optimize StaticHtml component for React js 🚀 #14917
feat: Optimize StaticHtml component for React js 🚀 #14917sanjaiyan-dev wants to merge 11 commits intowithastro:mainfrom
Conversation
Refactors the StaticHtml component to use React.memo for efficient static HTML rendering, improving performance and compatibility.
🦋 Changeset detectedLatest commit: 0a083e9 The changes in this PR will be included in the next version bump. Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
github-actions
bot
added
pkg: react
florian-lefebvre
left a comment
florian-lefebvre
left a comment
There was a problem hiding this comment.
I don't feel confident approving this given how sensitive it is (react is one of our most uses integrations), I'll wait for someone else. Anyways, can you add a patch changeset? Thank you!
| StaticHtml.shouldComponentUpdate = () => false; | ||
|
|
||
| export default StaticHtml; | ||
| export default memo(StaticHtml, () => true); |
There was a problem hiding this comment.
Just noting that memo is indeed noted as the equivalent at the end of https://react.dev/reference/react/Component#shouldcomponentupdate. Memo docs: https://react.dev/reference/react/memo
There was a problem hiding this comment.
Just noting that
memois indeed noted as the equivalent at the end of https://react.dev/reference/react/Component#shouldcomponentupdate. Memo docs: https://react.dev/reference/react/memo
Thanks for checking! You are correct that they serve the same purpose. But actually, shouldComponentUpdate is only for Class components, so it gets ignored here. The old code wasn't really running. Switching to memo ensures it works properly.
Sorry if I am wrong
There was a problem hiding this comment.
I wouldn't be surprised if it worked, undocumented
Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>
|
Hi @florian-lefebvre, sorry to bother you again. Could you please let me know if this PR looks good now ? |
2 participants
This PR optimizes the StaticHtml component, addressing the limitations of the previous implementation (which relied on an incorrect
shouldComponentUpdatestrategy). It now correctly usesReact.memoto prevent unnecessary re-renders of the static HTML content. This approach is more performant and is the correct way to memoize function components.shouldComponentUpdateimplementation.shouldComponentUpdatewithReact.memousing custom comparison function to prevent re-renders.https://react.dev/reference/react/memo