useState on React Hooks not updating Array

Question

I have tried many things and can't seem to understand why setTypes won't update the 'types' array??

import { useState, useEffect } from 'react';
import { PostList } from './post-list';
import * as api from '../utils/api';

export const PostSelector = (props) => {
  const [posts, setPosts]     = useState([]);
  const [loading, setLoading] = useState(false);
  const [type, setType]       = useState('post');
  const [types, setTypes]     = useState([]);
  
  const fetchTypes = async () => {
    setLoading(true);
    const response = await api.getPostTypes();
    delete response.data.attachment;
    delete response.data.wp_block;
    const postTypes = response.data;
    console.log(response.data); // {post: {…}, page: {…}, case: {…}}
    setTypes(postTypes);
    console.log(types); // []

    // Why types remain empty??
  }

const loadPosts = async (args = {}) => {
  const defaultArgs = { per_page: 10, type };
  const requestArgs = { ...defaultArgs, ...args };
  

  requestArgs.restBase = types[requestArgs.type].rest_base; // Cannot read property 'rest_base' of undefined
  
  const response = await api.getPosts(requestArgs);
  console.log(response.data);
}

useEffect(() => {
  fetchTypes();
  loadPosts();
}, []);

  return (
    <div className="filter">
      <label htmlFor="options">Post Type: </label>
      <select name="options" id="options">
        { types.length < 1 ? (<option value="">loading</option>) : Object.keys(types).map((key, index) => <option key={ index } value={ key }>{ types[key].name }</option> ) }
      </select>
    </div>
  );
}

Please, take a look at the console.log and notice the different responses.

What I am trying to do is to load list of types, in this case 'post', 'page' and 'case' and then render a list of posts based on the current 'type'. The default type is 'post'.

If I add [types] to useEffect. I finally get the values but the component renders nonstop.

Thanks to everyone for your comments. Multiple people have pointed out the problem, being that, the fact that we set the state doesn't mean it will set right away because it it asynchronous.

How do we solve this problem then? Regardless of the reasons, how do we get it done? How do we work with our state at any point in time and perform calculations based on our state if we don't know when it will become available? How do we make sure we wait whatever we need to and then use the values we expect?

Thanks for the quick response, but that returns the same results. — drjorgepolanco, Feb 19 '20 at 02:08
I'm not sure if `setTypes()` is async method. But try using await, `await setTypes([...postTypes]);` — boosted_duck, Feb 19 '20 at 02:11
Don't you receive any errors on `console.log`? It would also aggregate to the question to post them, if you receive any. — Alexander Santos, Feb 19 '20 at 02:15
Thanks @GlenK. I tried adding an object as a default value of types, just to see if that would update the state, still won't work. Returns an empty object instead that an empty array. — drjorgepolanco, Feb 19 '20 at 02:15
Thanks @boosted_duck tried with await, but with and without the spread operator, still same exact result. — drjorgepolanco, Feb 19 '20 at 02:19
Does this answer your question? [useState set method not reflecting change immediately](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately) — segFault, Feb 19 '20 at 03:03
This answers your question. https://stackoverflow.com/questions/60294328/react-hooks-update-sort-of-whenever-they-feel-like-it/60294453#60294453 — Zain Ul Abideen, Feb 19 '20 at 07:23
Thanks @ZainUlAbideen! The problem in this case is that types is an object so that causes useEffect to re-render forever. — drjorgepolanco, Feb 19 '20 at 19:16
Your welcome but I don't get it that how re-rendering is connected to types being object? — Zain Ul Abideen, Feb 19 '20 at 19:25
@ZainUlAbideen take a look at this: https://dev.to/karthick3018/common-mistake-done-while-using-react-hooks-1foj — drjorgepolanco, Feb 19 '20 at 19:35
@drjorgepolanco, Thanks, I hope you've read the comments in on this article ;) Glad it helped you. Happy coding. — Zain Ul Abideen, Feb 20 '20 at 06:35

72GM · Answer 1 · 2022-05-17T11:32:37.943

For any one coming here and not being able to set/update a useState array you need to use a spread operator (...) and not just the array e.g. "[...initState]" instead of "initState" ... in Typescript

 //initialise
  const initState: boolean[] = new Array(data.length).fill(false);
  const [showTable, setShowTable] = useState<boolean[]>([...initState]);

  // called from an onclick to update
  const updateArray = (index: number) => {
    showTable[index] = !showTable[index];
    setShowTable([...showTable]);
  };

score 0 · Answer 2 · answered Feb 19 '20 at 02:29

0

It seems like useState is asynchronous and does not update the value instantly after calling it.

Review this same case here

answered Feb 19 '20 at 02:29

nicoavn

73
6

Muhammad Abdullah · Answer 3 · 2020-02-19T02:50:56.700

0

useState's setTypes is an asynchronous function so the changes do not take effect immediately. You can use useEffect to check if anything changes

useEffect(()=>{
    const defaultArgs = { per_page: 10, type };
    const requestArgs = { ...defaultArgs, ...args };
    requestArgs.restBase = types;
    console.log("types updated",types)
},[types])

You can remove loadPosts because now useEffect will run whenever types change

edited Feb 19 '20 at 02:50

answered Feb 19 '20 at 02:43

Muhammad Abdullah

29
6

If I pass [types] it never stops rendering. – drjorgepolanco Feb 19 '20 at 03:06
That's strange. Can you provide some example code on https://stackblitz.com/edit/react-leukwv so I can test it. – Muhammad Abdullah Feb 19 '20 at 03:22

score 0 · Answer 4 · answered Feb 19 '20 at 03:01

You have declared your types to be an array, yet you are passing a dictionary of dictionaries through to it. Try this:

const [types, setTypes]     = useState({});

You also do not need to call

loadPosts()

becuase the useState hook will re-render your component, only updating what is needed.

Nguyễn Văn Phong · Answer 5 · 2021-05-18T08:54:25.440

Ok, The short answer is due to Closures

It not due to asynchronous as other answers said !!!

Solution (☞ﾟヮﾟ)☞

You can check the changes by console.log at return function like this.

return (
    <div> Hello World! 
      {
        console.log(value) // this will reference every re-render
      } 
    </div>
  );

or create a new one useEffect with value as a dependency like below

 React.useEffect(() => {
    console.log(value); // this will reference every value is changed
  }, [value]);

function App() {
  const [value, Setvalue] = React.useState([]);
  
  React.useEffect(() => {
    Setvalue([1, 2, 3]);
    console.log(value); // this will reference to value at first time
  }, []);
  
  return (
    <div> Hello World! 
      {
        console.log(value) // this will reference every re-render
      } 
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>

<div id="app"></div>

Read here in more detail: useState set method not reflecting change immediately

Does this answer your question? Let me know if you need any help ^^! @drjorgepolanco — Nguyễn Văn Phong, May 25 '21 at 10:06

useState on React Hooks not updating Array

5 Answers5

Ok, The short answer is due to Closures

Solution (☞ﾟヮﾟ)☞

Linked