withAuthenticationRequired causing infinite loops when calling wrapped component's effect
See original GitHub issueDescribe the problem
Since upgrading to 1.2.0 from 1.0.0, it seems that creating a ProtectedRoute using withAuthenticationRequired leads to infinite remounting of components.
I am using React 16.13.1, react-router-dom 5.2.
This problem does not happen with auth0-react 1.0.0
export const ProtectedRoute = ({
component,
...args
}: {
component: ComponentType;
exact?: boolean;
path: string;
}) => {
const Comp = withAuthenticationRequired(component, {});
// @ts-ignore
return <Route {...args} render={(props) => <Comp {...props} />} />;
};
Usage that will cause it to break
// imagine this is inside a switch in react-router
<ProtectedRoute component={MyComponent} path="/whatever" />
// now this is our MyComponent, it calls an async thunk
function MyComponent() {
const fetchResults = async () => {
try {
dispatch(someAsyncThunk());
} catch (err) {
}
};
useEffect(() => {
fetchResults();
}, []);
return (<div>I will just keep calling my effect!</div>)
}
Issue Analytics
- State:
- Created 3 years ago
- Comments:5 (1 by maintainers)
Top Results From Across the Web
How to Solve the Infinite Loop of React.useEffect()
1. The infinite loop and side-effect updating state. A functional component contains an input element. Your job is to count and display how...
Read more >The Complete Guide to React User Authentication with Auth0
The focus of this tutorial is to help developers learn how to secure a React application by implementing user authentication.
Read more >ReactJS - Infinite Loop calling Wrapped Method - Stack Overflow
Simplify your life and instead of creating a bunch of wrappers, just create a single container-component that'll function the same way.
Read more >How to solve the React useEffect Hook's infinite loop patterns
Solve the issue of infinite loops when using the useEffect Hook in React to more smoothly utilize the Hook for your app's side...
Read more >uncaught error too many re-renders. react limits the number of ...
React limits the number of renders to prevent an infinite loop ... This causes the setOrderData_ function to be called in every render...
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 Free
Top 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
It would be awesome to have a hook helper like useLoginRedirectEffect() to do somethings like this
My bad, I had an axios interceptor that got left in on accident in the App.jsx component that was using getAccessTokenSilently(). This was working okay with 1.0.0 but broke with 1.2.0. But not really a bug!