React component not rendering correctly with Turbolinks in Rails 5.1

I have a very simple Rails application with a responsive component that simply displays "Hello" in an existing div on a specific page (say, a show page).

When I load the linked page using the url it works. I see Hello on the page.

However, when I am previously on another page (say the index page and then I go to the show page with Turbolinks, well, the component is not displayed unless I go back over and over again. The index page and return to the show page)

From here, every time I go back and forth, I can tell that the view is rendered twice as much.
Not only twice, but twice the time! (i.e. 2 times, then 4, then 6, etc.)

I know that since I was installing content at the same time div

, I was printing a message to the console.

In fact, I think that returning to the index page should still run the component code without displaying, since the div element is not on the index page. But why together?

I want to solve the following problems:

• To run the code on the first request of the show page
• To block code from running on other pages (including the index page)
• To have the code run once on subsequent requests for the show page

Here are the exact steps and code I used (I'll try to be as concise as possible).

• I have a Rails 5.1 application with a permission set with:

  rails new myapp --webpack=react
  
        
  
          
          
          
        
  
      

• Then I create a simple elemental sketch to get some pages to play:

  rails generate scaffold Item name
  
        
  
          
          
          
        
  
      

• I'll just add the following div element to the Show ( app/views/items/show.html.erb
  
  ) page :

  <div id=hello></div>
  
        
  
          
          
          
        
  
      

• Webpacker already generated the Hello ( hello_react.jsx
  
  ) component , which I modified as indicated in the order of using the above div element. I changed the original event 'DOMContentLoaded'
  
  :

  document.addEventListener('turbolinks:load', () => {
    console.log("DOM loaded..");
    var element = document.getElementById("hello");
    if(element) {
      ReactDOM.render(<Hello name="React" />, element)
    }
  })
  
        
  
          
          
          
        
  
      

• Then I added the following webpack script tag at the bottom of the previous view ( app/views/items/show.html.erb
  
  ):

  <%= javascript_pack_tag("hello_react") %>
  
        
  
          
          
          
        
  
      

• Then I run rails server
  
  and webpack-dev-server
  
  using foreman start
  
  (installed by adding gem 'foreman'
  
  to Gemfile
  
  ). Here is the content Procfile
  
  I used:

  web:     bin/rails server -b 0.0.0.0 -p 3000
  webpack: bin/webpack-dev-server --port 8080 --hot
  
        
  
          
          
          
        
  
      

And here are the next steps to reproduce the described behavior:

• Load index page using url http://localhost:3000/items
  
  
• Click New Item to add a new item. Rails redirects to the page showing products by URL localhost:3000/items/1
  
  . Here we see Hello React! message. It works well!
• Load the index page using the URL http://localhost:3000/items
  
  . The item is displayed as expected.
• Load the show page using the URL http://localhost:3000/items/1
  
  . The Hello message is displayed as expected with a single console message.
• Load index page using url http://localhost:3000/items
  
  
• Click on the "Show" link (must be done via turbolink). The message is not displayed in any console message.
• Click the Back link (must be done via turbolink) to go to the index page.
• Click the "Show" link again (to be done via turbolink). This time the message is displayed well. The console message for its part is shown twice .

From there, every time I go back to the index and return to the show page again, two more messages are displayed on the console each time.

Note. Instead of using (and replacing) a specific div element, if I allow the original file hello_react

that adds the div element, this behavior becomes even more noticeable.
Edit: Also, if I change the links link_to

to include data: {turbolinks: false}

. It works well. Just like we loaded pages using URLs in the browser's address bar.

I don't know what I am doing wrong.
Any ideas?

Edit: I've put the code in the following repo if you're interested in trying it: https://github.com/sanjibukai/react-turbolinks-test