Multiple mount component with fresh rails app and Turbolinks

Steps to reproduce

I’ve created a new rails app 5.1 and add react-rails 2.4.3:

rails new ciccio
cd ciccio
echo "gem 'react-rails' >> Gemfile"
bundle
rails g scaffold post title body:text
rails db:migrate

I’ve create a simple React component Hello.jsx

class Hello extends React.Component { 
  componentDidMount() {
    console.log("MOUNTED")
  }
  componentWillUnmount() {
    console.log("UNMOUNT")
  }
  render() {
    console.log("RENDER")
    return(<span>Hello</span>)
  }
}

And I render this component on app/views/posts/index.html.erb

<%= react_component('Hello') %>

Expected behavior

When I change page with turbolinks and return on a previous page with a React component the component should mount one time only.

Actual behavior

Look at this gif:

System configuration

Sprockets version: 3.7.1 React-Rails version: 2.4.3 Rails version: 5.1 Ruby version: 2.4.2

[pioz]

The issue is fixed for me! Thank you for your work!

[BookOfGreg]

Thanks a bunch for the detailed report! I’ll look into this and let you know.

Edit: Marked this as an enhancement rather than bug (although obviously buggy) as this seems more inconvenient rather than breaking for most cases. I do intend on fixing this.