ComponentDidMount actions with timeout

Question

I am trying to perform some actions when my component did mount, but not immediately. My component looks like something this:

object MyComponent {
  def apply = compopnent()

  class Backend($: BackendScope) {
    def render = {
      // Some markup
    }

    def actions() = setTimeout(1000) {
      //... Some state modifications
    }
  }

  val component = ScalaComponent.builder[Unit]("My component")
  .renderBackend[Backend]
  .componentDidMount(f => f.backend.actions())  // HERE!
  .build
}

I get type missmatch. Found SetTimeoutHandle, required react.Callback.

How to use timeout inside componentDidMount?

Nikita · Accepted Answer · 2018-06-14T08:33:14.273

1

CallbackTo class has async / delay / delayMs methods. You can get a delayed state mod callback like so: $.modState(...).delayMs(1000).void.

Note that async callbacks in React.js need careful handling. 1 second from mounting, your component might already be unmounted (in theory), and if your callback runs when it's already unmounted you will get an error. I'm not sure if scalajs-react offers anything on top of React.js in that regard.

edited Jun 14 '18 at 08:33

answered Jun 10 '18 at 20:35

Nikita

2,924
1
19
25

I was tryed to experiment with `delayMs`. I got type missmatch again at the same place. Found `CallbackTo[Future[Unit]]`, required `CallbackTo[Unit]`. Is it possible to avoid it? – Oleg Jun 13 '18 at 08:15
@Oleg yep, use the `void` method from the same CallbackTo class to discard the Future's value – Nikita Jun 14 '18 at 08:31

ComponentDidMount actions with timeout

1 Answers1