CODEWITHSUNDEEP
reactjsreact-router
IronWaffleMan
IronWaffleMan

Reputation: 2702

React Router causing component remount on Firebase update

I have an App component which, using react-router, holds a few components in two routes. I also have a Firebase data store which I want to bind to the state of App (using rebase) so I can pass it down to any component I wish as a prop. This is my App class:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: {}
    };
  }

  componentDidMount () {
    rebase.bindToState('items', {
      context: this,
      state: 'items'
    })
  }

  render() {
    return (
      <Router>
        <div className='container'>
          <div className="header">
            <h3>Header</h3>
            <Nav/>
          </div>
          <Switch>
            <Route exact path='/' component={() => <Home items={this.state.items} rebase={rebase} />} />
            <Route render={function () {
              return <p>Not Found</p>
            }} />
          </Switch>
        </div>
      </Router>
    )
  }
}

Now, when I load my page I get two mounts of the Home component. This in itself is not great. However, I have several actions in the Home component that use rebase to modify/read from Firebase. As a callback of these actions they also change the Home component's state. The problem is, whenever I do a Firebase call, it remounts the Home component and any state I have is lost.

If I remove the Router wrappers from the Home component, and render it purely as render( <Home items={this.state.items} rebase={rebase} /> ), my app works perfectly as intended. I don't know why wrapping it in Router stuff makes it not work. I thought it was because I had additional URL parameters that also changed when I call firebase updates (e.g. /?p=sgergwc4), but I have a button that changes that parameter without a firebase update and it doesn't cause any problems (i.e. doesn't cause a remount). So what's up with the Router?

Upvotes: 2

Views: 524

Answers (1)

IronWaffleMan
IronWaffleMan

Reputation: 2702

Turns out the answer is simple; instead of component={}, I should use render={}. Fixes everything. It was in the docs too.

Upvotes: 6

Related Questions