i'm having a tough time understanding the hook concept in this case:
the user signs in through google, updating the session state.
this updates a visitorType state from 'viewer' to 'buyside'...
and then my navbar is supposed to adjust. but it doesn't, unless switch from the browser to another app and then back again...
const { data: session } = useSession(); //next-auth login sessions
const [visitorType, setVisitorType] = useState('viewer')
const visitorRef = useRef(visitorType);
useEffect(()=>{
return(
() => {if (session) {
visitorRef.current='buyside';
setVisitorType('buyside')}
}
)
},[session])
from what i understand, useRef gets the value of something between re-rerenders? and useEffect is asynchronous, so it lags behind? - so, not sure how i can update a reference..
The function returned by useEffect fires when the components unmounts. I think what you want is:
useEffect(()=>{
if (session) {
visitorRef.current='buyside';
setVisitorType('buyside')}
}
},[session])
Regarding your question on useRef:
when you set visitorRef.current. No rerender is triggered.
when you call setVisitorType, a rerender happens