Skip to content

Fix React nodes being removed from DOM when they are still needed#7

Merged
bengry merged 12 commits into
masterfrom
fix-unmounting-nodes
Aug 25, 2018
Merged

Fix React nodes being removed from DOM when they are still needed#7
bengry merged 12 commits into
masterfrom
fix-unmounting-nodes

Conversation

@bengry

@bengry bengry commented Aug 19, 2018

Copy link
Copy Markdown
Contributor
  • Fixes When using React components inside Angular ones, they are attached to the root of the VDOM tree & not removed #1 permanently.
  • Fixes issue were React nodes were removed from the DOM when they were still needed (i.e. Fabric's Pivot component - where PivotItem may not be in the DOM but still needed for later.
  • Fixes ng-templates passed as ReactContent to be re-created every time (visible symptoms were multiple elements of the same type in the VDOM on initial component load, even though only one had a parent element actually contained in the DOM (element.isConnected === true).

Please let me know your thoughts on the fix, the idea behind it is that the root cause for needing to unmount Angular DOM elements was due to multiple renders, each creating a new instance of a given React component, unmounting the old one.
The amount of calls for the render prop can't be controlled (The React component that was hosted the Angular one, in our case office-ui-fabric-react's CommandBar decides how many times to call the render prop - and since React render props are essentially SFC (stateless functional component), it returns the same JSX for the same props, every time, so calling it more than necessary, although discouraged*, would yield no side-effects).
In the original (current) render prop wrapper implementation, a new TemplateRef was created for every render prop call.
This PR changes the way render prop wrappers work to never re-create the template, but only re-assign the context on subsequent render calls.

  • Note that JSX is just the VDOM representation of the actual element, if the same JSX is returned no renders to the DOM would occur because of it.

@bengry bengry requested review from benfeely and xjerwa August 19, 2018 21:21
@bengry bengry merged commit 184844e into master Aug 25, 2018
@bengry bengry deleted the fix-unmounting-nodes branch August 29, 2018 07:29
@bengry bengry restored the fix-unmounting-nodes branch January 2, 2019 16:46
@bengry bengry deleted the fix-unmounting-nodes branch January 2, 2019 16:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

When using React components inside Angular ones, they are attached to the root of the VDOM tree & not removed

2 participants