how do i update a navbar on an api call (specifically a google signin)-CodePudding

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..

CodePudding user response：

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