CODEWITHSUNDEEP
javascriptreactjstypescript
Jonathan
Jonathan

Reputation: 284

State not updating from useEffect hook

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

Upvotes: 1

Views: 60

Answers (3)

Mantofka
Mantofka

Reputation: 286

Just update setUsers directly like this:

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

Upvotes: 1

Jacob K
Jacob K

Reputation: 1183

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]]);
})

Upvotes: 3

Mehmet Guler
Mehmet Guler

Reputation: 86

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);

Upvotes: 1

Related Questions