Fixes needless custom component recreation (#1195)

shawncrawley commented 4 months ago

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 the useEffect 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 to JSON.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:

[x] Tests have been developed for bug fixes or new functionality.
[x] The changelog has been updated, if necessary.
[x] Documentation has been updated, if necessary.
[x] GitHub Issues closed by this PR have been linked.

_{By submitting this pull request I agree that all contributions comply with this project's open source license(s).}

shawncrawley commented 4 months ago

I'm not sure on those checklist items above,. It seemed at least a few wouldn't be relevant here, but let me know if I'm wrong there and I'm happy to wrap them up.

Archmonger commented 4 months ago

Tests are failing, due to a mixture of unpinned test dependencies and using old/deprecated github workflows for NodeJS setup.

You are free to do some quick fixes to get the tests functioning, or wait for me to fix them in a different PR. Hopefully I'll have time in the next week or so.

Archmonger commented 3 weeks ago

cc: @williamneto

reactive-python / reactpy

Fixes needless custom component recreation (#1195) #1224

Checklist