ReactJS state is not updating in useEffect

Question

I am building a ReactJS projects with functions and when I navigating into another page, set the values of props to the states but afterward when I click a button for logging these variables logs these as empty.

import React, { memo, useState, useEffect } from 'react';
import { axios } from '../constants/axios';
import { Table, Button } from 'antd'
import { baseUrl } from '../constants';

const Component = memo(function Component(props) {

    const [isLoading, setLoading] = useState(true);
    const [appToken, setAppToken] = useState("");
    const [eventToken, setEventToken] = useState("");
    const [columns, setColumns] = useState([])
    const [dataSource, setDataSource] = useState([]);

    useEffect(() => {
        console.log("app token > ", props.location.appToken)
        console.log("event token > ", props.location.eventToken)

        if (props.location.appToken === undefined || props.location.eventToken === undefined) {
            props.history.push("/home")
            return
        }


        console.log("props location appToken > ", props.location.appToken);

        setAppToken(props.location.appToken)
        setEventToken(props.location.eventToken)


        async function asyncNetworkCall() {
            await networkCall();
        }

        asyncNetworkCall();

    }, [])


    const detailOnClick = (event, token) => {
        event.preventDefault();

        console.log("token => ", token);
        console.log("app token > ", appToken);
        console.log("tracker token > ", token);
    }



    const networkCall = async () => {
        var allColumns = [
                {
                    title: 'Tracker Name',
                    dataIndex: 'TrackerName',
                    key: 'TrackerName',
                    render: (obj) => {
                        return <Button onClick={e => detailOnClick(e, obj.token)}>{obj.name}</Button>
                    }
                },
                {
                    title: "Token",
                    dataIndex: "token",
                    key: "token"
                },
            ]
    }


    return (
        <div style={{ display: "flex", flex: 1, width: "100%", height: "100%" }}>
            {isLoading && <p>This is Loading</p>}
            {!isLoading && <Table style={{ flex: 1 }} dataSource={dataSource} columns={columns} />}
        </div>
    )
})

export default Component;

When useEffect has worked appToken and eventToken is successfully logs ( props.location.variables ) in console but it can not assign to useState variables.

What I am missing in the component? What's wrong with this code?

Thanks in advance!

Answer 1

Ciao, I can't see any errors in your code. But you are using a higher order component (memo(...)) that memoize your component. Try to implement a Pure component (I mean remove memo). Could resolve your problem.

Answer 2

Reason your props are not getting updated or getting updated only twice, first initialization with useState and then once by useEffect , is that setAppToken and setEventToken have access to outdated value of props.location.appToken and props.location.eventToken since location is not marked as dependency for useEffect . So in the useEffect scope, you don't get the updated values for these props.

Also, not linked to yor problem, but you don't want to async-await in useEffect hook. You simply make that network call and when you get response, your component would re-render as response would result in props update of your component