score:8
there is no watcher on the actual dom. everytime the render function of a component gets called, the virtual dom gets re-build. if a component is no longer necessary, it gets removed from the virtual dom.
a diffing algorithm identifies those parts of the actual dom that need to be changed for the actual dom to be a reflection of the virtual dom: some components will have to be added to the actual dom (= called mounting), other components will have to be removed (= unmounting). this whole process is called reconciliation.
it is because of this reconciliation process, that react knows which components are to be removed from the actual dom. right before the component is removed, react calls the componentwillunmount() lifecycle hook.
if another script (javascript or jquery) causes the removal of a certain component from the actual dom, react will never notice it and therefore will not call the componentwillunmount() lifecycle hook.
score:5
this is not true. if you do manually remove a component from the dom it will not fire componentwillunmount
..
it happens only via virtual dom, level if the component is not present anymore:
// unmount children that are no longer present.
for (name in prevchildren) {
if (
prevchildren.hasownproperty(name) &&
!(nextchildren && nextchildren.hasownproperty(name))
) {
prevchild = prevchildren[name];
removednodes[name] = reactreconciler.gethostnode(prevchild);
reactreconciler.unmountcomponent(
prevchild,
false /* safely */,
false /* skiplifecycle */,
);
}
}
unmountcomponent
will then call componentwillunmount
.
i manually tested componentwillunmount
by opening the devtools and removing some components that had componentwillunmount
lifecycle method.
Source: stackoverflow.com
Related Query
- How does React know the component is removed from the DOM?
- How do I sync state from the DOM to my React Component in an Isomorphic Application?
- React router dom passing data from parent component to child router component does not pass the props.match
- ReactJs how to know when a component is removed from DOM
- How do I access the Context and Component state from within a DOM callback in a function React component?
- React Pluggable - Component isn't removed from the DOM on uninstallation of a plugin
- How to solve Warning: React does not recognize the X prop on a DOM element
- Making an HTML string from a React component in background, how to use the string by dangerouslySetInnerHTML in another React component
- React, how to access the DOM element in my render function from the same component
- How to initialize the react functional component state from props
- How to pass the match when using render in Route component from react router (v4)
- How to update the state of a sibling component from another sibling or imported component in REACT
- How does useState() in React Hooks know which Component instance it is?
- How to solve Warning: React does not recognize the `currentSlide`, ` slideCount` prop on a DOM element
- How to get the DOM node from a Class Component ref with the React.createRef() API
- Why does React discard the entire DOM subtree and recreate it from scratch?
- How does React know if a function component is a React component?
- How do you dynamically insert a React component into the DOM (for instance a dialog)?
- Does React automatically prune components which have had their mount points removed from the DOM?
- How to prevent React from re-rendering the whole component
- Using React how do I toggle the visibility of a nested component from a container component?
- How to call a component function on other component, but from the other component ? React
- How do I manage state on a React component that can have state changed from the parent or from events upon it?
- How can I use react useContext , to show data from context, in the same component
- How do I pass in the variant property of the material-ui TextField from a wrapping React component
- How does React State Hook gets the state variable name from the ES6 Destructuring Assignment
- I can not get the state from react router Link component using useLocation. So how can I pass it?
- How is an argument for a callback in React being passed from the child component to the parent component?
- How to pass an Array from Child component to Parent component in react I know how to pass from parent t
- React Router "Link to" does not load new data when called from inside the same component
More Query from same tag
- How to show a table on hovering a button in react?
- How to find an element by id in nested arrays
- How to create and return a text Array in React?
- How can I save a number in Firestore instead of a String?
- Redux toolkit. Uncaught Error: uSES not initialized
- How to force server side serving of a route
- Is there access to Formik props inside <Field validate>
- change the search term to lower case in ReactJs
- How To Use React or Angular To Create Reuseable Galleries That Only Load When Needed
- import does not work in subfolder
- JavaScript click event handler not fired in the code below
- Why isn't MenuItemLink rendered inside the menu?
- Check if React component is empty or has no child component
- ReactJS - Showing Column Name
- ReactJS - How to render iframe inner contents server-side, for SEO?
- Allow just a type of file to be uploaded using React.js
- How to rerender DOM after component's state was changed?
- Validating an object's property using MobX
- How to access Kubernetes container environment variables from Next.js application?
- How can I reinitialize a React hook
- How to solve Uncaught TypeError: Class extends value undefined is not a constructor or null?
- Is it possible to delay Fade's transition?
- How to properly display a Material UI Native select and change the selection using a state hook
- Map API batch stocks object to stocks array | React
- form validation in react
- JSDoc for a ES6 react component
- Chakra UI: Make HStack disappear with condition
- How to create a query for multiple ranges?
- Components do not re-render on state change react
- Not Able to get request body as desired