-
Notifications
You must be signed in to change notification settings - Fork 652
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Is componentDidMount expected to be called twice? #79
Comments
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:
If I remove the parent 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. |
meet your same problem, i'm looking forward to how to solve it |
@Chryseis I went with a simple solution:
|
@rowanwork thanks for your solution |
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 |
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. |
@rowanwork , Are you still using Transition, or TransitionGroup ? Is the only thing you removed CSSTransition? |
think my issue might be related to this: #136 |
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. |
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. |
I can tell you this happened when I tried to wrap a 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.
|
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:
|
I'll swing back another time and try again with the exit={false}, and see how that works I was using |
@the-simian after looking at the example of @browne0 i've found the fix for me. He had the Changing the key to Thanks @browne0 for saving my time 🎖 Not working
Working
|
@nealoke no problem :) Unless modified, the location key and pathname are usually the same. If so then the same route will attempt to remount. There is an important reason we pass the location to the Switch component. Another thing to note, there are two types of locations: A react element rendered by a Switch or Route can provide three props: history, match, and location. The history prop also has a Think of it like a controlled input vs uncontrolled input. A controlled input gets it's value from its parent component. Likewise, a "controlled" route or switch gets the location from the app, while an uncontrolled component gets it from the router object. Transitions need some type of relationship between different screens in order to know what to do with them. And the best way to let the switch know where you are is to pass it your immutable location. Hope this helps! |
I also came across exactly the same issue and find the solution right here. Even though my problem is already solved, I would like to provide some insight how the solution work. Firstly, why the The solution is when the By default, |
Really appreciate all the information in this thread. If I revisit this I'll try to post my results also. More example code is handy, especially when something is tricky to implement correctly |
Thanks everyone, I was having the same issue and this thread allowed me to go back to the important stuff. Thanks to @GuichiZhao for providing details on why this happens, too. Is this something that could/should be fixed in |
Meet the same problem. |
@fortinmike I haven't used React Router in a really long time, so I forgot its syntax, but I'll work on either making react-transition-group play well with it or provide an official workaround. |
use |
Any thoughts on how to deal with this? |
@alexdmejias My problem was that I was missing the location prop on the
|
This is the POC that I'm working with. Using the latest version of both
Component B is the same as component A, just switched the name. Navigating from route A to route B results in the following output:
is this what you have @LennardSennep ? |
@alexdmejias Hmm no that is not the issue I had tbh. I had the issue immediately after navigating to an element where you have to navigate 2 times back and forwards? Or am I I reading your console output wrong? |
@LennardSennep in the output above it is just me navigating once from route A to route B, no back and forth |
@alexdmejias Can you try to add the prop |
exact same output |
@alexdmejias sorry for the late reply. Can you maybe share your repo so I can see what’s going on? |
i have the same problem, i solved it by using |
I added a piece of the documentation accompanied by a demo about usage with React Router. It will be deployed in the next release. Basically you shouldn't wrap If you see a limitation in that approach and it doesn't fit into your specific use case, please share it in a new issue, providing a CodeSandbox demo. Thanks! |
Hi I have created the one HOC component in React Native please find the below code componentDidMount() { now I am calling this HOC from two tabs ( Tab 1 and Tab 2) Thanks, |
I think your issue is that you add an Event Listener but not removing it on ComponentWillUnmount(). Always remove Event Listeners if you do not use them anymore or remove it otherwise they will stay in active and could even crash your app in the worst case. |
This comment has been minimized.
This comment has been minimized.
I know we have all felt this many times before, but I feel compelled to say, I am not sure that I have ever been so happy to read a git comment more than this one. thanks for taking the time to post. |
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:
getKey
gets a basic, but unique key from React RouterThe text was updated successfully, but these errors were encountered: