React-rails: ReactRailsUJS: how to stop listening for events?

[anaumov]

Help us help you! Please choose one:

• [ ] My app crashes with react-rails, so I've included the stack trace and the exact steps which make it crash.
• [ ] My app doesn't crash, but I'm getting unexpected behavior. So, I've described the unexpected behavior and suggested a new behavior.
• [ ] I'm trying to use react-rails with another library, but I'm having trouble. I've described my JavaScript management setup (eg, Sprockets, Webpack...), how I'm trying to use this other library, and why it's not working.
• [x] I have another issue to discuss.

---

Hello there!

Thank you for the awesome gem! I want to implement 'lazy' loading for my react components and render them after window.onload event fired. But ReactRailsUJS start watching for turbolinks events and render components during loading page (on turbolinks:load). The page starts waiting and fires window.onload event only after all react components rendered.

How I can stop listening for events when ReactRailsUJS loaded? (I want to mountComponents manually on first load and detectEvents afterwords).

Let me know if something is unclear in my description :)

[BookOfGreg]

Good questions. If you're using something like webpacks then you could look into only loading those functions from react_ujs and calling them at will.
Maybe import {mountComponents, detectEvents} from 'react_ujs' : I haven't tried this myself but the idea should be there.

[rmosolgo]

Yeah, I also recommend taking a look at the implementation in this gem, then writing your own that works for you :) It sounds like you have pretty neat custom setup, so it might not be supported by react-rails out-of-the-box!

[anaumov]

@BookOfGreg, @rmosolgo thanks for quick response!

Yes, I can import these methods from react_ujs, but they don't allow me to stop listening for turbolinks:load event :(

[anaumov]

hey, everyone! If someone looking for solution, it's pretty easy ReactRailsUJS has method removeEvent. You can stop listening for any event you like. For example render components on window load instead of turbolinks:render

ReactRailsUJS.removeEvent('turbolinks:render', ReactRailsUJS.handleMount);
ReactRailsUJS.removeEvent('DOMContentLoaded', ReactRailsUJS.handleMount);
$(window).on('load', function() {
  ReactRailsUJS.handleMount();
  ReactRailsUJS.detectEvents();
})

[BookOfGreg]

Thanks @anaumov !
I've added an entry to the Wiki with your example: https://github.com/reactjs/react-rails/wiki/How-to:-Stop-listening-to-events