Is componentDidMount expected to be called twice?

Using version 1.2 in Chrome I can see that componentDidMount is getting called twice.

I am doing an Ajax call in the componentDidMount of my component, so this is not ideal. Is this the expected behaviour?

Example:

 <CSSTransitionGroup className='my-container'
                            transitionEnterTimeout={500}
                            transitionLeave={false}
                            transitionName='example'
                            component='div'
                        >
                        <MyComponent location={location} key={getKey(location.pathname)}>

getKey gets a basic, but unique key from React Router

[jquense]

Your key is probably changing more often them you think. Every time the key changes react will see the component as different and unmount it and remount it.

I have logged the key when I click a link to go from the current page (page 1) to the next page (page 2) and I see this:

• key-page-2
• key-page-1
• key-page-2

If I remove the parent <CSSTransitionGroup/> then it just logs key-page-2 as expected.

My transition group will only have direct child item e.g. page 1 or page 2. It might be working as expected, but it seems a bit odd that it is loading the next page, then loading the current page and then finally loading the next page.

[Chryseis]

meet your same problem, i'm looking forward to how to solve it

@Chryseis I went with a simple solution:

1. Removed usage of CSSTransitionGroup
2. Add an animation class to my element e.g. fade-in
3. Add an onTransitionEnd event handler to my element which removes the animation class

[Chryseis]

@rowanwork thanks for your solution

[jquense]

I'm not sure where your key is logged so its hard to know if anything is weird. If you can put together a reproduction I can take a closer look

[the-simian]

I'm experiencing this as well. I'll try to add some information - both componentDidMount and componentWillMount of children seem to be firing more than once

I can see the behavior stops when I remove the CSSTransition. In my case I can see that the key is certainly identical, I'm using the location.key and using the transition for transitioning components when the route changes.

I can also see that the double fire only happens on initial page load, not sure why.

[the-simian]

@rowanwork , Are you still using Transition, or TransitionGroup ? Is the only thing you removed CSSTransition?

[the-simian]

think my issue might be related to this: #136

[the-simian]

Ok I worked on this much longer than i'd liked, heres my results. no matter how hard I tried, I could NOT prevent a lot of unusual behavior, like multiple mounting events. At the end of the day I opted for a very brutish, but effective solution - I kept the animation classes in state, and used timers to update them when I needed the classes added and removed.

waaaay simpler, but nontheless got the job done.

[jquense]

Do you have a repro of the issue? Lifecycle hooks getting called more than once would be a serious bug in React, amoung other things.

[the-simian]

I can tell you this happened when I tried to wrap a <Route /> that rendered <Switch /> with a <TransitionGroup /> and <CssTransition />. something about the router and this library don't play nice together unfortunately.

I wish I could dedicate more time to debugging, but I kind of blew my time budget just localizing the issue to the interaction between this library and React Router.

I'm not sure what the best approach is, but for now, the best approach is to do something like this, and completely forego this lib.

class SomeThingLoadedByReactRouter extends Component {
  componentDidMount() {
    let ctx = this;
    setTimeout(function() {
      ctx.setState({
        animationClasses: "slide-enter slide-enter-active"
      });
    });

    setTimeout(function() {
      ctx.setState({
        animationClasses: ""
      });
    }, 2000);
  }

  render() {
    return (
      <div className={this.state.animationClasses}>Your stuff  in here.</div>
    );
  }
}

[browne0]

componentDidMount only get's called the first time the view is mounted onto the DOM. So unless you don't set your key as your location.pathname, it can be re-created several times.

There's a exit property that's provided to react-transition-group. Setting it to false would fix your problem, as you're literally just disabling the exit animation another way.

I don't think there's a problem with your component.

Example I used for my portfolio:

<TransitionGroup component="main">
          <CSSTransition
            key={location.pathname}
            timeout={timeout}
            exit={false}
            classNames="fade">
            <Switch location={location}>
              <Route exact path="/" component={Home} />
              <Route path="/blog" component={BlogList} />
              <Route path="/about" component={About} />
              <Route path="/contact" component={Contact} />
              <Route component={NotFound} />
            </Switch>
          </CSSTransition>
</TransitionGroup>

[the-simian]

I'll swing back another time and try again with the exit={false}, and see how that works

I was using location.key as my key, not location.pathname, but I was able to confirm the key was identical every time.

[nealoke]

@the-simian after looking at the example of @browne0 i've found the fix for me. He had the location as a prop on the Switch. After doing this in my case it also causes the componentDidMount to only fire once!

Changing the key to location.pathname or the prop exit to false did not make a difference for me.

Thanks @browne0 for saving my time 🎖

Not working

<TransitionGroup>
	<CSSTransition
		key={location.key}
		classNames="fade"
		timeout={{ enter: 500, exit: 0 }}
		exit={false}
	>
		<Switch>
			<Route exact path={`${basePath}start`} component={Start} />
			<Route exact path={`${basePath}questions`} component={Questions} />
			<Route exact path={`${basePath}comments`} component={Comments} />
			<Route exact path={`${basePath}capture`} component={Capture} />
			<Route exact path={`${basePath}disclaimer`} component={Disclaimer} />
			<Route exact path={`${basePath}finish`} component={Finish} />
		</Switch>
	</CSSTransition>
</TransitionGroup>

Working

<TransitionGroup>
	<CSSTransition
		key={location.key}
		classNames="fade"
		timeout={{ enter: 500, exit: 0 }}
	>
		<Switch location={location}>
			<Route exact path={`${basePath}start`} component={Start} />
			<Route exact path={`${basePath}questions`} component={Questions} />
			<Route exact path={`${basePath}comments`} component={Comments} />
			<Route exact path={`${basePath}capture`} component={Capture} />
			<Route exact path={`${basePath}disclaimer`} component={Disclaimer} />
			<Route exact path={`${basePath}finish`} component={Finish} />
		</Switch>
	</CSSTransition>
</TransitionGroup>