export const Redirect = () => {
const navigate = useNavigate();
const url = new URL(window.location.href);
const authorizationCode = url.searchParams.get('code');
const { provider } = useParams();
const updateUserState = useSetRecoilState(userState);
useEffect(() => {
const socialLogin = async () => {
const idtoken = await requestIdtoken(authorizationCode, provider);
const isUser = await requestLogin(provider, idtoken);
if (isUser) {
const response = await requestUserInfo();
*updateUserState({ ...response.data, isLogin: true });*
navigate('/');
} else {
navigate(`/signup/${provider}`);
}
};
socialLogin();
}, []);
return <div></div>;
Here is my code.
when I run this code. socialLogin function run twice.
but if I annotate <React.StrictMode>, it goes well.
I thought changing the state within useEffect was the cause, but it’s also resolved in the above way, so I wonder what’s the real cause
using useRef I ensure that the function runs only once.
export const Redirect = () => {
const navigate = useNavigate();
const url = new URL(window.location.href);
const authorizationCode = url.searchParams.get('code');
const { provider } = useParams();
const updateUserState = useSetRecoilState(userState);
*const isEffectRun = useRef(false);*
useEffect(() => {
*if (isEffectRun.current) {
return;
}*
const socialLogin = async () => {
const idtoken = await requestIdtoken(authorizationCode, provider);
const isUser = await requestLogin(provider, idtoken);
if (isUser) {
const response = await requestUserInfo();
updateUserState({ ...response.data, isLogin: true });
navigate('/');
} else {
navigate(`/signup/${provider}`);
}
};
socialLogin();
*isEffectRun.current = true;*
}, []);
return <div></div>;
StrictMode vs. Change state in useEffect( updateUserState() )
which one is the real cause? or both? (There is no parent Component and props)
And also let me know if you have any better ideas