How can I update few useState just for one render? - reactjs

Question

I have a little question about re-render with useState.
For example, I have five useState methods:
setFirstState(someValue);
setSecondState(someValueSecond);
setThirdState(someValueThird);
...
And I want for this all just one render with react hooks. Can you explane me or maybe some example?

Answer 1

You can combine it with useEffect with empty deps.
import { useState, useEffect } from 'react';
const MyComp = () => {
const [val, setVal] = useState('initialVal');
useEffect(() => {
setVal('newVal');
}, []);
// --^ - this is an empty dependency list
return <div>Hello</div>;
};

Answer 2

You can combine all those into one state.
setCombinedState({
first: someValue,
second: someValueSecond,
third: someValueThird,
});
:) Hope that will solve your problem.

Answer 3

You would like to use useReducer instead, and initiate it with an object with your (first, second, third...) properties, and then modify the one you want each time.
Declare your initial values
const initialState = {
someValue: 'someValue',
someValueSecond: 'someValueSecond',
someValueThird: 'someValueThird',
}
set it
const [val, setVal] = React.useReducer(initalState);
And modify then whenever you need it.
setVal({someValue: 'anotherValue'});
setVal({someValueSecond: 'anotherValue'});
setVal({someValueThird: 'anotherValue'});

Answer 4

Usually, when you want to change multiple states at the same time, it usually means that these states are couples in some manner.
Example
Take for instance this case: You want to fetch some data from an API, so you would have the following states:
const [loading, setLoading] = useState(false)
const [error, setError] = useState(false)
const [data, setData] = useState(undefined)
Usually when one of these states changes, the others do as well.
This is a clear case where you should use useReducer.
For instance, like this:
const reducer = (state, action) => {
switch (action.type) {
case 'error':
return {error: action.payload.error, loading: false };
case 'fetched':
return {data: action.payload.data, loading: false };
case 'loading':
return {loading: true};
default:
throw new Error();
}
}
And after this, you could make a custom hook to manage these states:
const {loading, error, data, dispatch} = useFetchingData()
To sum up
This is just an example, but I would recommend you to take a look at your case, and see if these states you are talking about are somehow connected, and could be better arranged in this manner.
Reducers need more code that the one I posted here. I just wrote the reducer function. If you want to know more about how they work, I recommend you to read the docs.
If you want to update your question with the actual case you are facing right now, I could help you further.