Access DOM node in onCreate

[danwad]

I want to take over control of a components state in the DOM (e.g. for rendering to canvas).

In the lifecycle hooks docs it says:

If you need to access the DOM element this is a side-effect. You should dispatch an action and let another part of your application handle the side-effect.

The example suggests firing an action and passing along the element's path.

Could this be elaborated on a bit? What is the best way of getting the element given the path?

Currently, I set id='my-id' on the element and access it through:

onCreate() {
  setTimeout(() => {
    doSomethingWithElement(document.getElementById('my-id'))
  }, 0)
}

Even if I were to dispatch an action to do this, I would at some point have to get the element in a setTimeout callback because the element isn't in the DOM yet. Is this the best way to get the element?

[anthonyshort]

Yeah I would dispatch an action from onCreate with the id of the element and handle that action in some middleware.

onCreate(model, dispatch) {
  dispatch(renderCanvas('my-id'))
}

Let the middleware take care of waiting until the next frame so your component doesn't have to care about it.

[danwad]

Thanks :) That's neat enough.

[11111000000]

requestAnimationFrame is also helpful

[sebastian-kreis]

If I dispatch anything in onCreate or onRemove without wrapping it directly inside an setTimeout I am getting a render loop which ends with Maximum Call Stack Size Exceeded. Does anyone else experience this behaviour or do I have a bug in my app I do not find?