Practical approach for running cleanup code for child component before it's parent's cleanup.

[jsprog]

I could confirm that cleanup_fn of parent components are run before their children's counterparts. But sometimes the programmer need to reverse this order when using some third party libraries.

Question 1: How could we run cleanup code for children components before their parents' cleanup?
Question 2: How to hook into component's life cycle to run code just before removal of it's DOM content?

Hint: Think about this as I'm trying to achieve onDestroy(() => { /* cleanup code */ }) from svelte.

[gbj]

It looks like the linked docs are wrong, for what it's worth, as they say that children are cleaned up first. I recall that switching this order fixed some kind of issue but I honestly can't remember what it was.

Question 2. Components don't have lifecycles, they are one-time setup functions. Cleanups follow the reactive graph, i.e., the nested dynamic parts of your app.

Question 1. There are simple ways to delay running some code (like wrapping queue_microtask around the parent's cleanup) but it's not clear to me whether they're going to be the right choice in your case. However, it may be that simple; again, depending on the use case.

The relevant function, in which parent cleanups run first. It's possible that running parent cleanups after children would actually be correct here, I would just hesitate to change it before I remember what the bug was that caused this ordering in the first place!

leptos/leptos_reactive/src/runtime.rs

Lines 193 to 212 in b1e8105

	pub(crate) fn cleanup_node(&self, node_id: NodeId) {
	// first, run our cleanups, if any
	let c = { self.on_cleanups.borrow_mut().remove(node_id) };
	// untrack around all cleanups
	let prev_observer = self.observer.take();
	if let Some(cleanups) = c {
	for cleanup in cleanups {
	cleanup();
	}
	}
	self.observer.set(prev_observer);
	// dispose of any of our properties
	let properties = { self.node_properties.borrow_mut().remove(node_id) };
	if let Some(properties) = properties {
	for property in properties {
	self.cleanup_property(property);
	}
	}
	}