使用useState钩子时-更改setState函数的调用顺序是否重要？

Question

I have a React functional component with two state variables ( itemsData & itemsCollections ). The variables are updated in the useEffect method. But after useEffect occur one of the state variables is null .

Upon switching the setStateFunctions ( setItemsData & setItemsCollect ) call order both arguments are inialized as expected.

How's that?

const MyComponent = ({itemsIds}) => {
   const [itemsData, setItemsData] = useState([]);
   const [itemsCollections, setItemsCollect] = useState({});

 useEffect(() => {
        fetchItemsData({ itemsIds }).then(({ items, itemCollect }) => {
             setItemsData(items);
             setItemsCollect(itemCollect);
        })
    }, [itemsIds]);
...
console.log('itemsData', itemsData) // the expected array
console.log('itemCollect', itemCollect) // empty objecy

State after useEffect: itemCollect = {}, itemsData = [{value:...},...]

Switching the order of the calls:

const MyComponent = ({itemsIds}) => {
   ...
 useEffect(() => {
        fetchItemsData({ itemsIds }).then(({ items, itemCollect }) => {
             setItemsCollect(itemCollect); // <--> switched rows
             setItemsData(items); // <--> switched rows

        })
    }, [itemsIds]);
...
console.log('itemsData', itemsData) // the expected array
console.log('itemCollect', itemCollect) // the expected object

State after useEffect: itemCollect = { someValue: ...} , itemsData = [{value:...},...]

Answer 1

There is a performance optimization called batching, which can change between React versions . When this optimization is applied, multiple setState calls will be batched together before the next render (and the order does not matter).

When not applied (eg inside a Promise as in your case, see Does React batch state update functions when using hooks? ), then each state update will trigger a new render (and the order matters).

=> console.log('itemCollect', itemCollect) may log different data in each render.

If you need to force a single state update, then calling a single dispatch from useReducer might be the best option.