How to get reference to rendered element after mounting?

[esindger]

Hello,
I did not found any life cycle hooks. What is the recommended way to get reference to rendered element?

[ryansolid]

Yes you are correct. There are no render based lifecycles. There is only creation and cleanup. And then a bunch of discreet computation executions. Every JSX element is an actual DOM node that is rendered. So you can use ref or forwardRef. ref assigns to a variable and forwardRef uses a function form.

let elRef;
setTimeout(() => elRef.clientWidth);
<div ref={elRef} />

or

let elRef;
setTimeout(() => elRef.clientWidth);
<div forwardRef={ref => elRef = ref} />

Technically speaking refs resolve at time of node creation before being connected to the live DOM so I usually end up setting some sort of delay or wrap it some sort of computed to access it. If you want to simulate the timing of like React's componentDidMount, I'd go for Promise.resolve().then(() => /*... */);. And for componentWillUnmount use mobx-jsx's cleanup method. The rest of the life cycles don't really apply as it will be managed through mobx's reactive system.

[esindger]

Thank you for the awesome explanation!