Component rendering two times after external redirect [duplicate]

Question

I'm having an issue with a component that is rendering from an external site that is rendering twice, I'm using react 18 and I already use a ref to handle the strict mode and new useEffect behavior, but i can't figure out why my dispatch is executing twice. I have removed everything from the component leaving only the log and I still get the same problem.

Routes:

 return ( <Grid> <PersistGate loading={null} persistor={persistor}> <SidebarProvider> <Routes> <Route path="/" element={<Welcome />} /> <Route path="oauth2-callback" element={<Oauth />} /> <Route element={<ProtectedRoutes />}> <Route element={<Layout />}> <Route path="/home" element={<Home />} /> <Route path="/client-view/*" element={<Submission />} /> </Route> </Route> </Routes> </SidebarProvider> </PersistGate> </Grid> ); }; export default App;

Component:

import { useSearchParams } from "react-router-dom"; import { useAppDispatch } from "../../store/hooks/hooks"; import { getOauth } from "../../store/thunks/app/app.thunks"; const Oauth = () => { const dispatch = useAppDispatch(); const shouldDispatch = useRef(true); const [searchParams] = useSearchParams(); useEffect(() => { if (shouldDispatch.current) { shouldDispatch.current = false; dispatch( getOauth({ code: searchParams.get("code") || "", state: searchParams.get("state") || "", }) ); } }, []); return null; }; export default Oauth;

URL: https://localhost:3000/oauth2-callback?state=dsada2321&code=12345

Using a React ref to track "mounting" is now considered a React anti-pattern. This won't help here anyway since the component is being mounted twice as a way to ensure reusable state. It's just a React18 thing in the React.StrictMode component. The solution is to properly cleanup any side-effects. — Drew Reese
– Drew Reese, Commented Feb 7, 2023 at 17:29

Wesley LeMahieu · Accepted Answer · 2023-02-07 13:13:07Z

0

It seems likely this is due to a new feature implemented in React 18 for Strict Mode which affects development-side only. This drove me mad initially but if you remove Strict Mode as a test, you should see the behavior stop.

https://reactjs.org/docs/strict-mode.html#ensuring-reusable-state

React 18 strict mode causing component to render twice

answered Feb 7, 2023 at 13:13

Wesley LeMahieu

2,6731 gold badge15 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Neketo Over a year ago

No, i already remove it and still happens also i was able to catch it with the ref on the component otherwise i would get 4 renders.

Wesley LeMahieu Over a year ago

My apologies, I misread that you handled for that! Can you provide details on the SidebarProvider provider? Have you tried stepping the log further up the parent tree to see when the double-render stops? I suspect either SidebarProvider or PersistGate. edit* If you wanted to provide a sandbox I could help troubleshoot this.

Neketo Over a year ago

i already tried removing both it and same result my best guess something with router v6

Neketo Over a year ago

So I just realized StrictMode does not only trigger a re-render on useEffect but on the first load will load the whole application twice that and since this is an external redirect from a sso portal that's why I'm seeing two renders. Im trying to find any documentation to why or how to avoid this. A little bit weird i was able to understand the useEffect but this im unable to find any documentation or work around without removing the strictmode.

Drew Reese Over a year ago

I think the pros of the StrictMode component vastly outweighs any perceived cons. Suggesting to just remove it is not a viable solution unless you really just don't want the extra debugging help when developing.

|

Collectives™ on Stack Overflow

Component rendering two times after external redirect [duplicate]

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related