next.js code works in run dev but not run build-CodePudding

The problem is with the useAddress() funciton in run dev when console logged it returns undefined undefiuned then address however in the run build/start it just returns undefined. How do I go about fixing this.

import { useAddress } from "@thirdweb-dev/react";
import Head from 'next/head';
import Link from 'next/link';
import Username from '../components/Username';
import React from "react";

const Home = () => {

    let address = useAddress();

    console.log(address)
    
        if (address) {
            return (
                <>
                    <Head>
                        <title>home</title>
                        <link rel="icon" href="/drum.svg" />
                    </Head>
                    <Username address={address} />
                </>
            );
        } else {
            return (
                <>
                    <Head>
                        <title>home</title>
                        <link rel="icon" href="/drum.svg" />                
                    </Head>
                    <Link href="/">
                    <a className="absolute pt-1 text-xl font-semibold transform -translate-x-1/2 top-1/2 left-1/2">click here to log in</a>
                    </Link>
                </>
            );
        }
}

export default Home;

CodePudding user response：

Imperative code is too unpredictible in React. You should use useEffect(()=>{console.log(address)},[]) instead and it will probably work the same in both settings.

CodePudding user response：

I hope this works:

import { useAddress } from "@thirdweb-dev/react";
import Head from 'next/head';
import Link from 'next/link';
import Username from '../components/Username';
import React, {useState, useEffect} from "react";

const Home = () => {
    const [address, setAddress] = useState(false)

    useEffect(()=> {
        setAddress(useAddress())
    }, [])

   
    
        if (address) {
            return (
                <>
                    <Head>
                        <title>home</title>
                        <link rel="icon" href="/drum.svg" />
                    </Head>
                    <Username address={address} />
                </>
            );
        } else {
            return (
                <>
                    <Head>
                        <title>home</title>
                        <link rel="icon" href="/drum.svg" />                
                    </Head>
                    <Link href="/">
                    <a className="absolute pt-1 text-xl font-semibold transform -translate-x-1/2 top-1/2 left-1/2">click here to log in</a>
                    </Link>
                </>
            );
        }
}

export default Home;