title: React Component not rendered properly with Turbolinks in Rails 5.1
body: <p>I have a very simple Rails app with a react component that just displays "Hello" in an existing <em>div element</em> in a particular page (let's say the <em>show</em> page).</p>
  
  <p>When I load the related page using its URL, it works. I see <em>Hello</em> on the page.</p>
  
  <p>However, when I'm previously on another page (let's say the <em>index</em> page and then I go to the <em>show</em> page using Turbolinks, well, the component is not rendered, unless I go back and forth again. (going back to the <em>index</em> Page and coming back to the <em>show</em> page)</p>
  
  <p>From here every time I go back and forth, I can say that the view is rendered twice more time.<br>Not only twice but twice more time! (i.e. 2 times then 4, then 6 etc..)</p>
  
  <p>I know that since in the same time I set the content of the <code>div</code> I output a message to the console.</p>
  
  <p>In fact I guess that going back to the <em>index</em> page should still run the component code without the display since the <em>div element</em> is not on the <em>index</em> page. But why in a cumulative manner?</p>
  
  <p>The problems I want to solve are:</p>
  
  <ol>
  <li>To get the code run on the first request of the <em>show</em> page</li>
  <li>To block the code from running in other pages (including the <em>index</em> page)</li>
  <li>To get the code run once on subsequent requests of the <em>show</em> page</li>
  </ol>
  
  <hr>
  
  <p>Here the exact steps and code I used <em>(I'll try to be as concise as possible.)</em><br></p>
  
  <ul>
  <li><p>I have a Rails 5.1 app with react installed with:</p>
  
  <pre><code>rails new myapp --webpack=react
  </code></pre></li>
  <li><p>I then create a simple <em>Item</em> scaffold to get some pages to play with:</p>
  
  <pre><code>rails generate scaffold Item name
  </code></pre></li>
  <li><p>I just add the following <em>div element</em> in the <em>Show</em> page (<code>app/views/items/show.html.erb</code>):</p>
  
  <pre><code>&lt;div id=hello&gt;&lt;/div&gt;
  </code></pre></li>
  <li><p><em>Webpacker</em> already generated a <em>Hello</em> component (<code>hello_react.jsx</code>) that I modified as following in ordered to use the above <em>div element</em>. I changed the original <code>'DOMContentLoaded'</code> <em>event</em>:</p>
  
  <pre><code>document.addEventListener('turbolinks:load', () =&gt; {
    console.log("DOM loaded..");
    var element = document.getElementById("hello");
    if(element) {
      ReactDOM.render(&lt;Hello name="React" /&gt;, element)
    }
  })
  </code></pre></li>
  <li><p>I then added the following <em>webpack</em> script tag at the bottom of the previous <em>view</em> (<code>app/views/items/show.html.erb</code>):</p>
  
  <pre><code>&lt;%= javascript_pack_tag("hello_react") %&gt;
  </code></pre></li>
  <li><p>I then run the <code>rails server</code> and the <code>webpack-dev-server</code> using <code>foreman start</code> (installed by adding <code>gem 'foreman'</code> in the <code>Gemfile</code>) . Here is the content of the <code>Procfile</code> I used:</p>
  
  <pre><code>web:     bin/rails server -b 0.0.0.0 -p 3000
  webpack: bin/webpack-dev-server --port 8080 --hot
  </code></pre></li>
  </ul>
  
  <hr>
  
  <p>And here are the steps to follow to reproduce the described behavior:</p>
  
  <ol>
  <li>Load the <em>index</em> page using the URL <code>http://localhost:3000/items</code></li>
  <li>Click <em>New Item</em> to add a new item. Rails redirects to the item's <em>show</em> page at the URL <code>localhost:3000/items/1</code>. Here we can see the <em>Hello React!</em> message. It works well!</li>
  <li>Reload the <em>index</em> page using the URL <code>http://localhost:3000/items</code>. The item is displayed as expected.</li>
  <li>Reload the <em>show</em> page using the URL <code>http://localhost:3000/items/1</code>. The <em>Hello</em> message is displayed as expected with one console message.</li>
  <li>Reload the <em>index</em> page using the URL <code>http://localhost:3000/items</code></li>
  <li>Click to the <em>Show</em> link <em>(should be performed via turbolink)</em>. The message is <strong>not</strong> shown neither the console message.</li>
  <li>Click the <em>Back</em> link <em>(should be performed via turbolink)</em> to go to the <em>index</em> page.</li>
  <li>Click again to the <em>Show</em> link <em>(should be performed via turbolink)</em>. This time the message is well displayed. The console message for its part is shown <strong>twice</strong>.</li>
  </ol>
  
  <p>From there each time I go back to the <em>index</em> and come back again to the <em>show</em> page displays two more messages at the console each time.</p>
  
  <p>Note: Instead of using (and replacing) a particular <em>div</em> element, if I let the original <code>hello_react</code> file that append a <em>div</em> element, this behavior is even more noticeable.
  <br>Edit: Also, if I change the <code>link_to</code> links by including <code>data: {turbolinks: false}</code>. It works well. Just as we loaded the pages using the URLs in the browser address bar.</p>
  
  <hr>
  
  <p>I don't know what I'm doing wrong..
  <br>Any ideas?</p>
  
  <p>Edit: I put the code in the following repo if interested to try this:
  <a href="https://github.com/sanjibukai/react-turbolinks-test" rel="noreferrer">https://github.com/sanjibukai/react-turbolinks-test</a></p>