Route component mounting twice
See original GitHub issue@maisano I can’t figure out why my component appears before the transition and then it gets animated.
Here a simple repro: https://github.com/damianobarbati/react-app
git clone https://github.com/damianobarbati/react-app
cd react-app
yarn install
yarn serve:dev
yarn build:dev
The user app running at http://localhost:8080/user/
shows this behaviour: clicking list
and then home
you can see:
- view/picture being at left
- view/picture disappears
- view is animated sliding right to left.
View container is position:fixed
=> https://github.com/damianobarbati/react-app/blob/master/apps/user/components/layout.js#L23
What am I doing wrong? Thanks in advance for your effort with this project, I’m trying to use it in a cordova app hoping for great performance!
Issue Analytics
- State:
- Created 6 years ago
- Comments:17 (14 by maintainers)
Top Results From Across the Web
React Component Mounting Twice - Stack Overflow
The problem is that the component prop here is a function application, which yields a new class on each ...
Read more >React App mounting twice ? : r/react - Reddit
This is caused by rendering the component inside ReactStrict Mode, to fix this remove the `<React.StrictMode>` tag fromthe root of your app.
Read more >React Components rendered twice — any way to fix this?
The reason why this happens is an intentional feature of the React.StrictMode . It only happens in development mode and should help to...
Read more >How to avoid React componentDidMount being called ...
Are you seeing your React component calling the componentDidMount lifecycle multiple times? The answer to this problem is to avoid ...
Read more >Strict Mode - React
Lifecycles will not be double-invoked in production mode. ... With Strict Mode starting in React 18, whenever a component mounts in development, React...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
it’s also worth noting that i’ll be publishing the v4 update soon which will make all of this easier by providing a couple higher-level rrv4 wrappers,
AnimatedSwitch
+AnimatedRoute
.on holiday at the moment, but hoping to have some time to dig into this soon.