Ref resets between different calls of my custom hook in React

I want to create a hook called useWallet to manage smart contract interaction:

import {ethers, InterfaceAbi, parseEther} from "ethers";
import { useRef } from "react";

const useWallet = () => {
    const provider = new ethers.BrowserProvider(window.ethereum)
    const signer = useRef<ethers.JsonRpcSigner>();

    const connect = async () => {
        signer.current = await provider.getSigner();
        console.log(signer.current);
    };

    const deployContract = async (abi: InterfaceAbi, bytecode: string) => {
        console.log(signer.current);
        if (!signer.current) {
            throw new Error("Signer not connected");
        }

        const factory = new ethers.ContractFactory(abi, bytecode, signer.current)
        await factory.deploy(parseEther("0"))
    };

    return {
        connect,
        deployContract,
        signer
    };
}

export default useWallet;

On my Home page, I call the connect method, and everything is OK (Metamask wallet opens):

export default function Home() {
    const { connect } = useWallet()

    useEffect(() => {
        connect().catch((err) => {
            console.log(err)
        })
    }, [])

  return <MyChildComponent />
}

The problem is when I try to call the deployContract function (in MyChildComponent) the signer is always undefined.

It looks like at each useWallet call the signer is reset.

This is because every time you call a hook or a component, you get a completely independent instance. So this signer.current will be uniquely tied to each useWallet call.

To have a global instance, I would suggest you use the Context API. As an example like so:

// WalletContextProvider.js

import { createContext, useContext } from "react";

const WalletContext = createContext();

export default function WalletContextProvider({ children }) {
  const provider = new ethers.BrowserProvider(window.ethereum);
  const signer = useRef<ethers.JsonRpcSigner>();

  const connect = async () => {
    signer.current = await provider.getSigner();
    console.log(signer.current);
  };

  const deployContract = async (abi: InterfaceAbi, bytecode: string) => {
    console.log(signer.current);
    if (!signer.current) {
      throw new Error("Signer not connected");
    }

    const factory = new ethers.ContractFactory(abi, bytecode, signer.current);
    await factory.deploy(parseEther("0"));
  };

  return (
    <WalletContext.Provider
      value={{
        connect,
        deployContract,
        signer,
      }}
    >
      {children}
    </WalletContext.Provider>
  );
}

export function useWalletContext() {
  return useContext(WalletContext);
}

Everywhere you need the wallet info, grab them like below. This way you are always referring to the same instance:

import { useWalletContext } from "./WalletContextProvider"; // Make sure you use the correct path.

export default function SomeComponent() {
  const { connect } = useWalletContext();

  // ...
}

Finally, ensure, for example, in index.js, you render your components wrapped by WalletContextProvider:

import WalletContextProvider from "./WalletContextProvider"; // Make sure you use the correct path.

//...

<WalletContextProvider>
  <App/>
</WalletContextProvider>