Fixes needless custom component recreation (#1195) #1224
Merged
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.
As detailed in issue #1195, custom components were being needlessly re-created on every re-render. This was due to the
vdomImportSource
(i.e.model.importSource
) of the custom component being used as a dependency of theuseEffect
function that creates/binds the custom components. Using a JavaScript object (i.e. dictionary) as a dependency was an issue in this case since the object in question was being recreated anew every re-render even though its actual key/value entries were not.I initially completely removed
vdomImportSource
from the dependencies, not understanding a use case where it would ever change anyway, but second guessed its importance due to it being there in the first place. I ended up finding this article and opted for their recommended "Approach 4", which is toJSON.stringify
the object and use that as the dependency instead.I also went ahead and refactored the
react.js
web template file to use the new createRoot(...).render() workflow in ReactJS 18, as mentioned by @rmorshea in the original issue. Although it seems to be working great for me, I'm definitely not a ReactPy nor even a ReactJS expert, so that should definitely be looked over by someone more experienced.Checklist
Please update this checklist as you complete each item:
By submitting this pull request I agree that all contributions comply with this project's open source license(s).