Lifecycle method after a Rerender

[jsonmurphy]

Apologies if this has been asked before, I've tried to look through the issue log but I'm unsure what vecty's terminology would be for something like this.

I have a component that loads some data asynchronously as soon as it is mounted. Once the data is loaded, I call vecty.Rerender() and the data shows up as expected however I also need to call an external JQuery library that will manipulate the dom that has the data. Simply calling the function after vecty.Rerender does not work. It always gets executed before the rerender.

So my question is how would vecty handle a situation like this? I would imagine that there would be a need for something analogous to React's componentDidUpdate that is only triggered after a rerender.

[pdf]

We don't have a lifecycle hook for this currently, and native JS interop in general is something we've only lightly tackled.

Even if we had such a hook, you might find that you run into problems, because signification modifications to the DOM by an outside library will result in vecty's view of the DOM being out of sync with reality, and this is likely to produce unpredictable behaviour. Do you mind telling me which JQuery library you're trying to use, if it's public?

[jsonmurphy]

The library I'm trying to integrate is JQuery DataTables. I think my alternative would be to supply the data on initial render and then initialize the table on mount which is probably a better idea for this use case i suppose.

Are there plans to support solid interop with native JS for 1.0.0 or beyond? if so, are there any tickets/threads where it is being discussed that you could point me to?

[pdf]

Yeah, for a library like that, I'd suggest you simply create a container element, and let the library deal with rendering anything inside that, using the Mount hook to initialise it, and updating data via the lib's API. I can't tell you how DataTables will act when you remove the underlying element upon navigating to a new view, whether it leaves a clean state in the browser - if it has a destructor, that should be called via Unmount.

I'm not sure there's any way we can meaningfully integrate with JS libraries that modify the DOM significantly, and React doesn't support this either - it's orthogonal to the design of these tools. Currently, I'm not entirely sure what the pain-points are for interop, or how they might be mitigated.