I set my contract set-up in event-handler, i did not set it in useEffect because we use useEfect when we want to stay syncronized with state update, but here we don't need to be syncronized because we set our contract instance, provider and signer just one time, so i set it into event handler, like this:

export default function App() {
    const [signer, setSigner] = useState(null)
    const [contract, setContract] = useState(null)
    async function handleConnect() {
        const _abi = abi.abi
        console.log("abi is", _abi)
        const address = "0xEBfead02c119AAf45fFcE71C948538aC5E20C65e"
        const provider = new ethers.providers.Web3Provider(window.ethereum)
        await provider.send("eth_requestAccounts", [])
        //const provider = new ethers.BrowserProvider(window.ethereum)

        //console.log(await signer.getAddress())

        setContract(new ethers.Contract(address, _abi, signer))

Is this correct way?

1 Answer 1


Setting up your contract instance and signer in the event handler function handleConnect() rather than useEffect() is a valid approach. Since you only need to set up the contract and signer instance once, and they do not depend on any state changes, it is not necessary to use useEffect() to keep them in sync with the component state.

However, it's worth noting that when you call setContract() and setSigner(), they do not immediately update the state variables contract and signer. Instead, these updates are scheduled and will be processed by React in a later render cycle. This means that immediately after calling setContract(), the value of the contract may still be null. To ensure that you're using the most up-to-date values of the contract and the signer, you should use their values returned by useState() directly within the handleConnect() function.

Also, you should be aware that the console.log statement console.log(contract.address) may throw an error because contract is not guaranteed to have a value immediately after calling setContract(). Instead, you should check if contract is not null before accessing its properties or use optional chaining like console.log(contract?.address) to avoid errors.

Your approach is valid, but please appropriately use the values returned by useState() directly within the handleConnect() function and handle any potential null values of contract or signer.

  • Yes u were right, for contract.address i got null because state update occurs after running all code in event handler. So I wanna know one thing that, suppose i have multiple component scripts and each of them consist state update, so how will the update happen? Does all state update of all script run after running all event handler code of all script or it will be on script basis? I mean separately for one script after running all event handler code the state update occurs and then same rendering for second, third, fourth scripts.
    – Hacek
    Mar 26, 2023 at 1:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.