Using React Hooks with more than one Key/Value Pair in State Object

Question

I wonder what the best way is to define more than one key/value pair for the state in a Functional Component.

In a class I would initialithe State like

this.state = {
    first: 'foo',
    second: 'bar'
};

To update the State I call

this.setState({
    first: 'foobar',
    second: 'barfoo'
});

Now with React Hooks I initialize the State like so.

const [first, setfirst] = useState('foo');
const [second, setSecond] = useState('bar');

To update the State I call:

setFirst = 'foobar';
setSecond = 'barfoo';

But, IMHO, that is not ideal. I have to rewrite const [x, setX] = useState(...); everytime I want to add a new key/value pair to the State object. Boilerplate. I further always have to keep in mind the "setter" name of x, which is setX. That will get messy, if the State object grows.

It would be nicer if I could simply call

setState(first: 'foobar', second: 'barfoo');

But I am not sure how to initialize the State object properly/what is the best way to do that.

Have you found the best way to do this? I want to avoid re-rendering multiple child components when using setState — UMR, Sep 29 '21 at 16:01
but you forgot to accept an answer...I use combination of React.memo and useReducer @Stophface — UMR, Sep 30 '21 at 02:38
@UMR There is an accepted answer with seven Upvotes... The one from Monika Mangal. The answer provided by Alireza HI works too... Look closely. I think what you want to achive is different from what I wanted to do. — four-eyes, Sep 30 '21 at 06:26

score 9 · Accepted Answer · answered Aug 01 '19 at 08:54

9

You can set the whole object using useState like as follows -

const [stateObj, setStateObj] = useState({first:'foobar', second:'barfoo'});

and then to update the state -

setStateObj({first:'foobarnew', second:'barfoonew'})

answered Aug 01 '19 at 08:54

Monika Mangal

1,665
7
17

5

Just do not forget to spread the `state` if you don't set all your state like this. Old `this.setState()` updates the related properties and merge the changed ones with the state but with hooks, the state always is overwritten. – devserkan Aug 01 '19 at 08:58

Alireza HI · Answer 2 · 2019-08-01T09:14:39.930

Using object as the initial value

You can use a javascript object as your value. This way you can put more variables in your object and in one place. So your code would be like below:

const [example, setExample] = useState({first:'foobar', second:barfoo''});

Then you can update it like this:

setExample({...example,first:'new foobar'})
setExample({...example,second:'new foobar second'})

This type of setting is deconstruct your previous values and is replacing your new values with the old ones.

Using this object you just need to add your new property to the initialize of example and to places which you need to set it.

As a complex example you can reach this link:

React Hooks useState() with Object

Notice (updating the variable)

If you just update it using {first:'new foobar'} and don't include the second in your properties you may loose the old value of second. So use the ...example to have the old value of second.

score 1 · Answer 3 · answered Aug 01 '19 at 09:11

I would suggest to go for reducer hooks. React official site says if you have complex state rather go for userReducer hook.



const initialState = {
first: 'foo',
second: 'bar'
};

function reducer(state, action) {
  switch (action.type) {
    case 'updateFirst':
      return {...state, first: 'fooBar' };
    case 'updateSecond':
      return {...state, second: 'barfoo' };
    case 'updateBoth':
      return {...state, second: 'barfoo',first: 'fooBar' };
    default:
      throw new Error();
  }
}

function Component() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      {state.first}
      {state.second}
      <button onClick={() => dispatch({type: 'updateFirst'})}>UpdateFirst</button>
      <button onClick={() => dispatch({type: 'updateSecond'})}>UpdateSecond</button>
      <button onClick={() => dispatch({type: 'updateBoth'})}>UpdateBoth</button>
    </>
  );
}

Code : https://codesandbox.io/s/busy-rosalind-9oiow

too much boilerplate imo for such a simple thing – Tarun Dugar Mar 01 '21 at 05:05 — Tarun Dugar, Mar 01 '21 at 05:05

score 0 · Answer 4 · answered Aug 01 '19 at 09:03

From React docs: useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one. useReducer also lets you optimize performance for components that trigger deep updates because you can pass dispatch down instead of callbacks.

const initialState = { first: '', second: '' };

function reducer(state, action) {
  switch (action.type) {
    case 'doFirst':
      return {...state, first: 'newFirst' };
    case 'doSecond':
      return {...state, second: 'newSecond' };
    default:
      throw new Error();
  }
}

function Component() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      {state.first}
      {state.second}
      <button onClick={() => dispatch({type: 'doFirst'})}></button>
      <button onClick={() => dispatch({type: 'doSecond'})}></button>
    </>
  );
}

score -1 · Answer 5 · answered Aug 01 '19 at 08:52

-1

You can make your own hook to do this !

function useMultipleStates() {
    const [first setFirst] = useState('foo');
    const [second, setSecond] = useState('bar');

    const setState = (f, s) => {
        setFirst(f);
        setSecond(s);
    }

    return {
        first,
        second,
        setState,
    }
}

You can adapt this to your needs, but if should give you an idea on how to do it.

answered Aug 01 '19 at 08:52

Morphyish

3,932
8
26

1

That is even more boilerplate, overhead, errorloaden. – four-eyes Aug 01 '19 at 08:54

Using React Hooks with more than one Key/Value Pair in State Object

5 Answers5

Linked