How can i get the updated state value in useEffect

Question

i set the users state with axios data but in useEffect hook whereevery i console.log(users) its show the default state that is [] array. please see the comment for better undarstand.

let [users, setUsers] = useState([]);

useEffect(() => {
    axios.get('/chat_user_list').then((res) => {
        setUsers(res.data);
    });
    
    let pusher = new Pusher('api-key-over-here', {
        cluster: 'ap1',
        authEndpoint: "/admin/broadcasting/auth",
        auth: {
            headers: {
                "X-CSRF-Token": csrfToken,
                "Accept": "application/json"
            },
        },
    });
    let channel = pusher.subscribe(`presence-room`);

    channel.bind("pusher:member_added", (member) => {
        //how can i get the updated users state value over here
        console.log(users); //set the users with axios data but it still return the default state; that is an [] array

    });

}, []);

larz · Answer 1 · 2021-09-02T20:29:30.753

0

Your axios call is asynchronous, so it's still being completed while the rest of the code in your useEffect continues to run. If you put the rest of your logic inside your then you will have access to res.data which is what users will be set to. Note - since setUsers is async also, users itself may not be updated when you get to your pusher functionality.

useEffect(() => {
   axios.get('/chat_user_list').then((res) => {
        setUsers(res.data);
let pusher = new Pusher('api-key-over-here', {
        cluster: 'ap1',
        authEndpoint: "/admin/broadcasting/auth",
        auth: {
            headers: {
                "X-CSRF-Token": csrfToken,
                "Accept": "application/json"
            },
        },
    });
    let channel = pusher.subscribe(`presence-room`);

    channel.bind("pusher:member_added", (member) => {
        console.log(res.data); 
        // you should have access to updated users here
    });
}, []);

edited Sep 02 '21 at 20:29

answered Sep 02 '21 at 19:55

larz

5,724
2
11
20

i want to run the code only once. giving the dependency users in useEffect whenever user change its re run the code. and subscricbe again again – kundefine Sep 02 '21 at 20:26
Updated to only run when the component is mounted – larz Sep 02 '21 at 20:29
at last i get the users with previous state something like this setUsers(prevUsers) – kundefine Sep 02 '21 at 21:10

How can i get the updated state value in useEffect

1 Answers1