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'),
)
})
Written by naohiro
Related protips
2 Responses
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
Best
#Ruby
Authors
Filed Under
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#