variable of public key isn't updated in useEffect hook

Question

i have cloned the solana dapp-scaffold repo and i am trying to display the pubkey of the user connected with an alternative way, using web3js. When i try to do it the pubkey is initially set to null and then changed to the pubkey of the user however the change isn't displayed in the frontend

// Next, React
import { FC, useEffect, useState } from 'react';
import Link from 'next/link';

// Wallet
import { useWallet, useConnection } from '@solana/wallet-adapter-react';

// Components
import { RequestAirdrop } from '../../components/RequestAirdrop';
import pkg from '../../../package.json';

// Store
import useUserSOLBalanceStore from '../../stores/useUserSOLBalanceStore';

//solana
import * as solanaWeb3 from '@solana/web3.js';


export const HomeView: FC = ({ }) => {


  const wallet = useWallet();
  const { connection } = useConnection();
  
  console.log("solanaweb3: ",solanaWeb3)

  const balance = useUserSOLBalanceStore((s) => s.balance)
  const { getUserSOLBalance } = useUserSOLBalanceStore()

  let pub;

  useEffect(() => {
    if (wallet.publicKey) {
      console.log(wallet.publicKey.toBase58())
      getUserSOLBalance(wallet.publicKey, connection)
      pub = new solanaWeb3.PublicKey(wallet.publicKey).toString()
    }
  }, [wallet.publicKey, connection, getUserSOLBalance])


  return (

    <div className="md:hero mx-auto p-4">
      <div className="md:hero-content flex flex-col">
        <h1 className="text-center text-5xl md:pl-12 font-bold text-transparent bg-clip-text bg-gradient-to-tr from-[#9945FF] to-[#14F195]">
          Scaffold Lite <span className='text-sm font-normal align-top text-slate-700'>v{pkg.version}</span>
        </h1>
        <h4 className="md:w-full text-center text-slate-300 my-2">
          <p>Simply the fastest way to get started.</p>
          Next.js, tailwind, wallet, web3.js, and more.
        </h4>
        <div className="max-w-md mx-auto mockup-code bg-primary p-6 my-2">
          <pre data-prefix=">">
            <code className="truncate">Start building on Solana  </code>
          </pre>
        </div>        

        <h4 className="md:w-full text-center text-slate-300 my-2">
          {pub && (<h1>pubKey: {pub}</h1>)}
          lol
          {pub ? (<h1>{pub}</h1>) : (<h1>null</h1>)}
        </h4>
        
          <div className="text-center">
          <RequestAirdrop />
          {/* {wallet.publicKey && <p>Public Key: {wallet.publicKey.toBase58()}</p>} */}
          {wallet && <p>SOL Balance: {(balance || 0).toLocaleString()}</p>}
        </div>
      </div>
    </div>
  );
};

my problem is that pub is always null

Answer 1

Since pub is a local variable with a default value undefined, even if it's value is changed by

pub = new solanaWeb3.PublicKey(wallet.publicKey).toString(); 

React is not able to track it's value changes and avoid a rerender. Without a rerender it's value is undefined in React context and because of that you see the null

{pub ? (<h1>{pub}</h1>) : (<h1>null</h1>)} // pub is always undefined in React context 

To fix this, change it to a state.

const [pub, setPub] = useState(); 
and later
setPub(new solanaWeb3.PublicKey(wallet.publicKey).toString());