Why can't access my new state value from another function in react.js hook?

Question

I set my marinaList new value. I can access marinaList state in GetMarinaList function. But when I try access marinaList state in GetCounterConnectionDevices function I get inital value of marinaList. Why I can't access my current value of my state in another function ?

import React, { useState, useCallback, useEffect } from "react";

function CounterConnectionDeviceDefinition(props) {
    const [marinaList, setMarinaList] = useState([]);
    useEffect(() => {
        GetMarinaList();
    }, [])
    const GetMarinaList = () => {
        const RETRIEVED_MARINAS = [
            {
                "Oid": 3348000013080006,
                "Status": 1,
                "LastUpdated": 1615185446387,
                "OperationRefNo": 1459738,
                "MarinaCode": 1,
                "MarinaName": "MERSİN MARİNA",
                "MarinaLocation": "MERSİN",
                "IsActive": true
            },
        ]
        setMarinaList(RETRIEVED_MARINAS)
        console.log(" RETRIEVED_MARINAS", RETRIEVED_MARINAS); //I get retrieved marina data
        GetCounterConnectionDevices(-1);
    }
    const GetCounterConnectionDevices = () => {
        const RETRIEVED_COUNTER_CONNECTION_DEVICES = [
            {
                "Oid": 3348000013898110,
                "Status": 1,
                "LastUpdated": 1618484345355,
                "OperationRefNo": 1498555,
                "PedestalControlCenterOid": 3348000013898011,
                "CounterParameterType": {
                    "Oid": 0,
                    "Status": 0,
                    "LastUpdated": 0,
                    "OperationRefNo": 0,
                    "ParameterTypeOid": 0,
                    "ParameterName": null,
                    "ParameterCode": "001",
                    "ParameterExplanation": null
                },
                "CounterConnectionDeviceModelName": "LUNA_BC62_ANTALYA",
                "CounterConnectionDeviceId": "6-0-64-228-24-0-0-0",
                "CounterConnectionDevicePassword": null,
                "CounterConnectionDeviceIpAddress": null,
                "CounterConnectionDevicePortNumber": null,
                "IsActive": true
            },
        ]
       console.log("🚀 => status.then => RETRIEVED_COUNTER_CONNECTION_DEVICES", RETRIEVED_COUNTER_CONNECTION_DEVICES, marinaList); // I get Retrieved Counter Array and [].  
    }
    return (
        <div>
           
        </div>
    )
}
export default CounterConnectionDeviceDefinition

Answer 1

Because react updates states async.

This means that right after calling setMarinaList(RETRIEVED_MARINAS) the state hasn't changed yet. The list is still empty.

That's why you have useEffect.

If you need to run a function when the state changes that's your friend. You can change your code to something like this

useEffect(() => {
        const RETRIEVED_COUNTER_CONNECTION_DEVICES = [
            {
                "Oid": 3348000013898110,
                "Status": 1,
                "LastUpdated": 1618484345355,
                "OperationRefNo": 1498555,
                "PedestalControlCenterOid": 3348000013898011,
                "CounterParameterType": {
                    "Oid": 0,
                    "Status": 0,
                    "LastUpdated": 0,
                    "OperationRefNo": 0,
                    "ParameterTypeOid": 0,
                    "ParameterName": null,
                    "ParameterCode": "001",
                    "ParameterExplanation": null
                },
                "CounterConnectionDeviceModelName": "LUNA_BC62_ANTALYA",
                "CounterConnectionDeviceId": "6-0-64-228-24-0-0-0",
                "CounterConnectionDevicePassword": null,
                "CounterConnectionDeviceIpAddress": null,
                "CounterConnectionDevicePortNumber": null,
                "IsActive": true
            },
        ]
       console.log("? => status.then => RETRIEVED_COUNTER_CONNECTION_DEVICES", RETRIEVED_COUNTER_CONNECTION_DEVICES, marinaList); // I get Retrieved Counter Array and [].  
    }, [marinaList])

And you can remove GetCounterConnectionDevices(-1); call now.

Note: your useEffect will also be called once, when the components mounts, so most likely you need to to a check for an empty array.

Answer 2

Because everytime you are using your hook in different component youre creating new instance with separated state. If you want to share your state in this hook across multiple components, use ContextAPI in custom hook