Last Updated: June 27, 2025
·
2.893K
· naohiro

Integrate with Turbolinks and webpacker react

Without turbolinks, your pack will look like following

document.addEventListener('DOMContentLoaded', () => {
  ReactDOM.render(
    <Component />,
    document.getElementById('react-component'),
  )
})

However, this won't work well with turbolinks. You need to update event listener like following

document.addEventListener('turbolinks:load', function() {
  ReactDOM.render(
    <Component />,
    document.getElementById('react-component'),
  )
})

Reference: https://github.com/rails/webpacker/issues/161

2 Responses
Add your response

Thank you

over 1 year ago ·

Thanks for sharing this, Naohiro. This explains why my React components were disappearing on page navigation with Turbolinks. Just to confirm, if I’m also unmounting components, should I handle that on turbolinks:before-cache to avoid memory leaks? Let me know if you’ve dealt with that part too.

4 days ago ·

Have a fresh tip? Share with Coderwall community!

Post
Post a tip