React data fetch doesn't cause rerender

When I fetch my data from the API it doesn’t cause rerender and nothing changes after the fetching is finished.

function App() {
  let [array, setArray] = useState([]);

  useEffect(()=>{
    fetch("http://localhost:3001/api")
      .then(res => res.json())
      .then(res => setArray(res))
  }, []);

  return (
    <div className="App">
      { array.length > 0 && array.list.map(item => <h1>{item}</h1>)}
    </div>
  );
}

This way, my array never gets displayed and react shows only its original state of an empty array

I’m a bit confused, is your array state variable an array? Because you’re trying to access array.list, which suggests that array is actually an object.

If you console.log(res) in your second .then, does it log an array or an object? What happens if you log res.list?

array is initially set using the useState to an empty array and later it is set to the value of res which is {"list":["one","two","three"]}

If I console.log it in my second .then it returns an empty array
If I console.log res.list, I get ["one", "two", "three"]

  useEffect(()=>{
fetch("http://localhost:3001/api").then(res=>res.json()).then(res=>{
  setArray(res)
  console.log(res)
  console.log(array)})
  },[])

This returns this →

> {list: Array(3)}
> []

If it’s an object don’t name it array.

You can’t check the length of an object like you are.

const obj = {
  test: 'test'
}

console.log(obj.length); // undefined
console.log(obj.length > 0); // false
1 Like

If you just want the array, another option would be to just save the array to state:

      .then(res => setArray(res.list))

But I also think that “array” is a very poor variable name (even if it is an array). I would want something that makes it clear exactly what it is, like “events”, “recipes”, or “goodNamesForPoodles”. Avoid generic names. Good code tells a story, and good variable names make it easier to read that story.

2 Likes

Agree, it should be named after what it is and not what type of data it is.

Even having the data type in the name is often a bad idea in my opinion. So just name and not nameStr or users and not usersArr, or whatever else you can think of. If you do need something to denote the type use something that says less about the data type and more about what it is. So for example usersList or whatnot.

The reason being, just because you named it array and you expect it to contain an array doesn’t mean it’s actually an array. Adding the data type to the name just adds a false sense of security around the type.

Variable names are hard, don’t be afraid to refactor them as needed. It’s quick and easy using an editor and mostly safe as long as you pay attention.

1 Like

Golden words there. It is one of the most important things you can do to make your code readable and can be very difficult to come up with the “perfect” name. But it’s worth it.

1 Like

@veljkocukic Hopefully I’m not derailing the thread completely and you got some answers to your questions. If not, please post back with any questions you have.


The worst is when you know exactly what code you want to write and then you just get stuck at the variable name right at the beginning.

Sometimes I just say OK let’s not spend forever thinking about a good name right now, just call it something reasonable and come back to it. As you write more code the “true” name will often reveal itself as a reflection of the code you write.

And sometimes the name just has to change because it isn’t what it started out as any longer.

2 Likes

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.