You're mixing up two different problems here. console.log(people) is an empty array because you've already called useState, and it's already returned an empty array, because the state was an empty array at the beginning of that render. So even though setPeople updates the state, your people variable doesn't magically update: it's already captured the value it had at the beginning of that render. So you need to wait for the next render to see the updated value. In other words, you can't log state immediately after updating it, and expect to see the updated value. Instead, you could move your console.log(people) to be immediately before the return ... so you're seeing what the state is before the render. Now, you say you get an error in " person.name " - you haven't explained what the error is, so we can't help you with this error. Chances are the /people endpoint isn't returning what you think it's returning.

Generally speaking, using setState inside useEffect will create an infinite loop that most likely you don't want to cause. There are a couple of exceptions to that rule which I will get into later.

useEffect is called after each render and when setState is used inside of it, it will cause the component to re-render which will call useEffect and so on and so on.

One of the popular cases that using useState inside of useEffect will not cause an infinite loop is when you pass an empty array as a second argument to useEffect like useEffect(() => {....}, []) which means that the effect function should be called once: after the first mount/render only. This is used widely when you're doing data fetching in a component and you want to save the request data in the component's state.

I think your approach of a card code is not the good one.

Here you always have the same information twice: you're getting the total in total and then you're setting totals with that same result. You can simplify by keeping only one of the two variables.

Also your code here is not working because the useEffect will never be executed: As you have put totals as a dependency, but it never changes. Even if you change totals somwhere else, you will have an infinite loop because in the useEffect depending on totals's changes, it change it value, which will execute the useEffect that changes totals etc etc, infinite loop.

I think your loop should also be in a useEffect with no dependencies as it will be executed only at the first render.

I would do soemthing like that, and maybe the code can be move improved:

  const [prices, setPrices] = useState([1, 3, 6, 39, 5]);
  const [total, setTotal] = useState(0);

  useEffect(() => {
    // Sets total with already present products in the card
    // This useEffect is called only at the first render
    prices.forEach((price) => {
      setTotal((total) => total + price);
    });
  }, []);

  useEffect(() => {
    setTotal((total) => total + prices[prices.length - 1]);
     // Called when prices values changes, like if you're adding a product to your card
     // It keeps your total updated
  }, [prices]);

  const addPrice = () => {
    // Simulate a new product in your card
    setPrices((prices) => [...prices, Math.floor(Math.random() * 10)]);
  };

  return (
    <div className="App">
      <p>total: {total}</p>
      <button onClick={() => addPrice()}>add price</button>
    </div>
  );

I hope I'm clear in my answer lol

getCards is asynchronous so you need to await it. All functions defined as asynchronous return a promise. You will have to alter how you’re doing it as you can’t call await directly in a use effect because you can’t declare the callback as async. Please note I’m just reading your code so I could be wrong. As mentioned you also can’t console log updated state until it rerenders

You can check this answer here.

This is because react's state update is async. You can't rely on its update right after calling setState. Put your effects (code that is run after a state is updated) in a useEffect hook.

const handleFilter = async(e, params) => {
  //... api call and etc
  setTerm(e.target.value); // update term
}

React.useEffect(() => {
  console.log(term) // return none-updated value! but I need fresh value
  // send this value to another api
}, [term]);

Setting the state in React acts like an async function.
Meaning that the when you set the state and put a console.log right after it, it will likely run before the state has actually finished updating.

Which is why we have useEffect, a built-in React hook that activates a callback when one of it's dependencies have changed.

In your case you're already using useEffect to update the state, but if you want to act upon that state change, or simply to log it's value, then you can use another separate useEffect for that purpose.

Example:

useEffect(() => {
   console.log(isActive)
   // Whatever else we want to do after the state has been updated.
}, [isActive])

This console.log will run only after the state has finished changing and a render has occurred.

• Note: "isActive" in the example is interchangeable with whatever other state piece you're dealing with.

Check the documentation for more info about this.

---

Additional comments:

• Best to avoid using the loose != to check for equality/inequality and opt for strict inequality check instead, i.e. - !==
  Loose inequality is seldom used, if ever, and could be a source for potential bugs.

• Perhaps it would better to avoid typing this as boolean | undefined.
  Unless justified, this sounds like another potential source for bugs.
  I would suggest relying on just boolean instead.

https://react.dev/learn/you-might-not-need-an-effect This is the sacred text for effects. In your case, just call both state updater functions from the same place. Some issues with what you've got: There will be a render cycle where those two state values are out of sync In Dev mode, that effect is called twice It disconnects the thing causing the change with the change being made. One effect is probably something a react dev will be able to spot and understand (if not like), but it's a slippery slope to lots of intertwined effects and completely undecipherable logic

you have two option here

1. add chat state to useEffect dependency array so it knows it depends on chat.

useEffect(() => {
  if (connection) {
    //...
    setChat([...chat, newMsg]); // issue with this line. chat is always empty
    //...
  }
}, [connection, chat]);

2. use setState callback to update chat so you won't get stale data

useEffect(() => {
  if (connection) {
    //...
    setChat((ch) => [...ch, newMsg]); // issue with this line. chat is always empty
    //...
  }
}, [connection]);

which the second way is more appropriate.