State not updating from useEffect hook

Question

For some reason when I am updating my state from the useEffect hook it is not persisting. I am expecting that my list of users will keep growing, but instead I am only seeing one user. Why is users not growing?

import { useState, useEffect } from "react";

interface IUser {
  name: {
    first: string;
    last: string;
  };
  picture: {
    thumbnail: string;
  };
}

function App() {
  const [users, setUsers] = useState<IUser[]>([]);

  const getUserName = (user: IUser): string => {
    if (!user) return "";

    return `${user.name.first} ${user.name.last}`;
  };

  const getThumbnail = (user: IUser): string => {
    if (!user) return "";

    return user.picture.thumbnail;
  };

  useEffect(() => {
    setInterval(() => {
      fetch("https://randomuser.me/api")
        .then((res) => res.json())
        .then((json) => {
          let newusers = [...users, json.results[0]];
          setUsers(newusers);
        })
        .catch((err) => {
          console.log(err);
        });
    }, 3000);
  }, []);

  return (
    <div className="App">
      {users?.map((user, idx) => (
        <div key={idx}>
          <h2>{getUserName(user)}</h2>
          <img src={getThumbnail(user)} />
        </div>
      ))}
    </div>
  );
}

export default App;

Here is a codesandbox demonstrating the issue https://codesandbox.io/s/react-typescript-forked-5h3553?file=/src/App.tsx:0-1054

Jacob K · Accepted Answer · 2022-02-26 23:24:53Z

3

The problem comes from the use of setInterval. When it is defined, it creates a closure including the current value of the variable users which of course starts as []. So every time the interval is invoked, it is using the value it had at the time of instantiation.

Luckily, calls to setState pass a parameter of the previous state, which you can use to quickly fix your problem:

.then((json) => {
  setUsers((prev) => [...prev, json.results[0]]);
})

answered Feb 26, 2022 at 23:24

Jacob K

1,1836 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mehmet Guler · Accepted Answer · 2022-02-26 23:23:11Z

1

You need to use the method returned from useState hook to update the array.

Here is the solution:

let newuser = json.results[0];
setUsers(prev => [...prev, newuser]);

Instead of:

let newusers = [...users, json.results[0]];
setUsers(newusers);

answered Feb 26, 2022 at 23:23

Mehmet Guler

862 bronze badges

Comments

Mantofka · Accepted Answer · 2022-02-26 23:28:28Z

1

Just update setUsers directly like this:

setUsers(prevState => […prevState, json.results[0]]);

answered Feb 26, 2022 at 23:28

Mantofka

2862 silver badges14 bronze badges

Collectives™ on Stack Overflow

State not updating from useEffect hook

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related