React-router: React Router triggers location change in lazy loaded components

[mhesham32]

here is the problem I have a modal to do auth (signin/up) after the auth is success this modal has logic to do like redirect to payment service the Project I work on was not using lazy / suspense but then we decided to use them for better performance -

------------> the problem

after a while we discovered that the modal is closed right after the auth it take us a lot of time to discover that this is because of react router trigger a location change even if we are in the same route we looked in every possible thing that could be the problem and after a long time we decided to not lazy loading this component and after that the problem was solved so this bug happens only on lazy loaded components .

sorry if I wasn't too descriptive in this issue but I try my best :smile:

the following image contains a logger that shows how many time the location changed while it is supposed to be only one .

[jadbox]

I haven't seen this problem yet. What version of react-router are you using?

[mhesham32]

@jadbox
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-router-dom": "^4.3.1",

[mattridley]

I have also just hit this, components that previously did not unmount and remount on route change now do (almost in effect reverting https://github.com/ReactTraining/react-router/pull/5430 when using Suspense + lazy). I can do some digging but not sure if anyone else has encountered anything similar since that is ahead of the curve in terms of understanding the issue?

[fpunny]

How are you creating the lazy component? Because if you wrap the same import with lazy, react router would remount that lazy component on route change (regardless of the route change)

[mattridley]

@fpunny Yes I realised I was creating a new component on each render pass, simply assigning the lazy result to a ref and using that resolved the issue for me. i.e.

function Loadable({ fallback = null, loader, ...props }: Props) {
  const lazyRef = useRef(lazy(loader));
  useEffect(() => {
    lazyRef.current = lazy(loader);
  }, [loader]);

  const LazyComponent = lazyRef.current;
  return <Suspense fallback={fallback}>{LazyComponent && <LazyComponent {...props} />}</Suspense>;
})

[justinlazaro-ubidy]

@mhesham32 if you still having an issue, if your implementation in route is like this

<route path="/something" component={props => <Test {...props}/>}

this implementation causing the remount, please change to

<route path="/something" component={Test}

[mhesham32]

@justinlazaro-ubidy the problem isn't about remounting it is about the location change which will make the component remount also if you want to add props to your route component you can use

<Route path="/" render={props => <Test {...props} {...otherProps}/>} />

this won't make the component remounting and you can pass other props to the Component as well

[mhesham32]

I closed this issue by mistake sorry

[sibelius]

@mhesham32 did you figure it out?

[sibelius]

@mattridley how can I use this solution with loadable-components?

[support[bot]]

:wave: @mhesham32, we use the issue tracker exclusively for bug reports and feature requests. However, this issue appears to be a support request. For usage questions, please use Stack Overflow or Reactiflux where there are a lot more people ready to help you out.
Please feel free to clarify your issue if you think it was closed prematurely.