question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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:

  1. view/picture being at left
  2. view/picture disappears
  3. 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:closed
  • Created 6 years ago
  • Comments:17 (14 by maintainers)

github_iconTop GitHub Comments

3reactions
maisanocommented, Aug 18, 2017

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.

1reaction
maisanocommented, Aug 18, 2017

on holiday at the moment, but hoping to have some time to dig into this soon.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found