DEV Community

Discussion on: React hooks in Axios interceptors

Collapse
 
arianhamdi profile image
Arian Hamdi

Thanks for the comment.
Adding an interceptor in a component is a side effect because we are manipulating something that is out of our scope of component.

you should eject previous interceptor in the clean up function and in the case you didn't, each time the useEffect is executed, one interceptor will be added to interceptors stack and this not the expected behaviour.

And be aware of new behaviour of strict mode in React 18 that execute effect twice in development mode. you can read more about that in this link Adding Reusable State to StrictMode

I created a codesandbox for the post react 18 codesandbox and a react 17 codesandbox

you can find out that the effects run twice in React 18.

Collapse
 
soongle profile image
SOONG-E

Thanks to your explanation, I totally understand! Your writing saved me, and the comments helped me a lot!
I put eject code back because I thought I needed it and It works well! and also your explanation about strict mode in React 18 helped me! it much better! Thank you! 😊