'React context states not updating / reverting to default

Hi so I made a context for providing Web3 details globally to make everything easier and in sync. It was working great and then something happened and suddenly the states for the context refuse to change.

This is the context

export const Web3Context = React.createContext<IWeb3Context>({
  contractAddress: CONTRACT_ADDRESS,
  provider: providerTemp,
  setProvider: () => {},
  signer: undefined,
  setSigner: () => {},
  contract: undefined,
  updateContract: () => {},
  account: 'Not Connected',
  updateAccount: () => {},
  connected: false,
  setConnected: () => {},
});

Context function

const Web3Provider: React.FC<Web3ProviderProps> = ({ children }) => {
  const [provider, setProvider] = useState(providerTemp);
  const [signer, setSigner] = useState(undefined);
  const [contract, setContract] = useState(
    new ethers.Contract(CONTRACT_ADDRESS, Chese.abi, providerTemp),
  );
  const [account, setAccount] = useState('Not Connected');
  const updateAccount = (accountTemp: string) => {
    setAccount(accountTemp);
  };
  const [connected, setConnected] = useState(false);
  const updateContract = (signer: ethers.providers.JsonRpcSigner) => {
    const yeah = new ethers.Contract(CONTRACT_ADDRESS, Chese.abi, signer);
    setContract(yeah);
  };
  const value = {
    CONTRACT_ADDRESS,
    provider,
    setProvider,
    signer,
    setSigner,
    contract,
    updateContract,
    account,
    updateAccount,
    connected,
    setConnected,
  };
  return <Web3Context.Provider value={value}>{children}</Web3Context.Provider>;
};

I believe something is causing rerenders somewhere and that is forcing everything back to defaults? In my navigation there is a "Connect Wallet" button that becomes an "Account" link when the connect state is true. When you click connect wallet it updates the whole context with multiple state updates one after another. And then the button switches to a Gatsby.js Link component to bring user to a new page.

For some reason, clicking connect wallet will connect the wallet with metamask and it does change the button into the account link which means that connect was set to true and rerendered the navigation and it stays that way until refresh.

{Web3Context.connected ? (
  <Link
    to="/account"
      className="text-white bg-gradient hover:text-white hover:bg-black hover:bg-none rounded-2xl px-4 py-3 my-0"
  >
   My Account
  </Link>
) : (
  <button
    onClick={connectWallet}
      className="text-white bg-gradient hover:text-white hover:bg-black hover:bg-none rounded-2xl px-4 py-3 my-0"
  >
    Connect Wallet
  </button>
)}

When I try to update any of the states that the context uses it seemingly fails and everything is default values.

Solution 1:^[1]

Figured it out.

The onClick in my button was onClick={connectWallet} which was causing lots of rerenders and forcing the context back to default. Switched it to onClick={() => connectWallet()}

I am using Gatsby. I also wasn't wrapping the context provider correctly which was resetting the context between internal links. As per Gatsby docs.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	michecode

'React context states not updating / reverting to default

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]