314

What is the correct way of updating state, in a nested object, in React with Hooks?

export Example = () => {
  const [exampleState, setExampleState] = useState(
  {masterField: {
        fieldOne: "a",
        fieldTwo: {
           fieldTwoOne: "b"
           fieldTwoTwo: "c"
           }
        }
   })

How would one use setExampleState to update exampleState to a (appending an field)?

const a = {
masterField: {
        fieldOne: "a",
        fieldTwo: {
           fieldTwoOne: "b",
           fieldTwoTwo: "c"
           }
        },
  masterField2: {
        fieldOne: "c",
        fieldTwo: {
           fieldTwoOne: "d",
           fieldTwoTwo: "e"
           }
        },
   }
}

b (Changing values)?

const b = {masterField: {
        fieldOne: "e",
        fieldTwo: {
           fieldTwoOne: "f"
           fieldTwoTwo: "g"
           }
        }
   })
3
  • you mean adding new object key value to existing object?
    – Just code
    Commented Jan 11, 2019 at 16:50
  • @Justcode For the first example yes, for the second example just altering the existing object Commented Jan 11, 2019 at 16:51
  • 2
    onValueChange={ () => setSelection( { ...prev , id_1: true } ) } Commented Dec 27, 2020 at 12:39

19 Answers 19

291

You can pass new value like this:

  setExampleState({...exampleState,  masterField2: {
        fieldOne: "a",
        fieldTwo: {
           fieldTwoOne: "b",
           fieldTwoTwo: "c"
           }
        },
   })
8
  • 5
    Great, that answers part a! do you know the best practice for part b? Commented Jan 11, 2019 at 16:54
  • 2
    changing also same just past masterField instead of masterField2 setExampleState({...exampleState, masterField: {//new values}
    – aseferov
    Commented Jan 11, 2019 at 16:57
  • 10
    Be aware of shallow copying when using the spread operator. See for example: stackoverflow.com/questions/43638938/… Commented Oct 23, 2019 at 17:49
  • 36
    If you are using the same state with its Dispatcher, you should use a function. setExampleState( exampleState => ({...exampleState, masterField2: {...etc} }) ); Commented Mar 7, 2020 at 4:05
  • 5
    @deathfry It's not wrong, it's just the setState behavior is asynchronous that it might produce unexpected behavior if your logic is heavy. Check this code sandbox that I create to see the difference between using direct state and functional. 4vfw6p.csb.app Commented Mar 2, 2022 at 11:56
228

If anyone is searching for useState() hooks update for object

Through Input

const [state, setState] = useState({ fName: "", lName: "" });
const handleChange = e => {
    const { name, value } = e.target;
    setState(prevState => ({
        ...prevState,
        [name]: value
    }));
};
<input
    value={state.fName}
    type="text"
    onChange={handleChange}
    name="fName"
/>
<input
    value={state.lName}
    type="text"
    onChange={handleChange}
    name="lName"
/>

Through onSubmit or button click

setState(prevState => ({
    ...prevState,
    fName: 'your updated value here'
}));
4
  • 3
    Why do you need to use callback?
    – Yola
    Commented Feb 6, 2021 at 13:45
  • @Yola This answer provides a better explanation than I could. Commented Aug 22, 2021 at 23:28
  • 2
    Let's say the object had 20+ properties resulting in 20+ text inputs. Would this still be efficient? Since every change on any input would rerender all 20+ inputs? Or would it be more efficient to create a useState seperately for each property?
    – Soerman
    Commented Sep 27, 2022 at 11:51
  • 1
    is long time that i forgot written :(
    – Tomoe
    Commented Jan 9 at 13:48
70

Generally you should watch out for deeply nested objects in React state. To avoid unexpected behavior, the state should be updated immutably. When you have deep objects, you end up deep cloning them for immutability, which can be quite expensive in React. Why?

Once you deep clone the state, React will recalculate and re-render everything that depends on the variables, even though they haven't changed!

So, before trying to solve your issue, think how you can flatten the state first. As soon as you do that, you will find handy tools that will help dealing with large states, such as useReducer().

In case you thought about it, but are still convinced you need to use a deeply nested state tree, you can still use useState() with libraries like immutable.js and Immutability-helper. They make it simple to update or clone deep objects without having to worry about mutability.

2
  • 2
    You can also use Hookstate (disclaimer: I am an author) to manage complex (local and global) state data without deep cloning then and without worrying about unnecessary updates - Hookstate will handle it for you.
    – Andrew
    Commented Oct 24, 2019 at 10:19
  • 1
    Does React rerender everything even if the state is just a single-level object? Commented Jan 6, 2022 at 22:24
48

I'm late to the party.. :)

@aseferov answer works very well when the intention is to re-enter the entire object structure. However, if the target/goal is to update a specific field value in an Object, I believe the approach below is better.

situation:

const [infoData, setInfoData] = useState({
    major: {
      name: "John Doe",
      age: "24",
      sex: "M",
    },

    minor:{
      id: 4,
      collegeRegion: "south",

    }

  });

Updating a specific record will require making a recall to the previous State prevState

Here:

setInfoData((prevState) => ({
      ...prevState,
      major: {
        ...prevState.major,
        name: "Tan Long",
      }
    }));

perhaps

setInfoData((prevState) => ({
      ...prevState,
      major: {
        ...prevState.major,
        name: "Tan Long",
      },
      minor: {
        ...prevState.minor,
        collegeRegion: "northEast"

    }));

I hope this helps anyone trying to solve a similar problem.

3
  • 1
    I have a question. Why do we need to wrap the function in parenthesis? I am not sure what is going on under the hood. Would you happen to know or where I can read more on that?
    – Xenon
    Commented Jul 16, 2020 at 1:12
  • 4
    @MichaelRamage Why do we wrap the function in parenthesis: (): To answer this simply; it's because setInfoData is of a high order by nature i.e It can take on another function as an argument, courtesy of the power provided by the Hook: useState. I hope this article will provide more clarity on higher-order functions: sitepoint.com/higher-order-functions-javascript Commented Jul 19, 2020 at 22:39
  • 5
    Very helpful, especially for the case where you are trying to update a property nested several layers deep, ie: first.second.third - the other examples cover the first.second, but not first.second.third Commented Sep 22, 2020 at 23:22
34

It's possible to use useReducer hook for managing complex state, instead of useState. To do it, first initialize state and updating function like this:

const initialState = { name: "Bob", occupation: "builder" };
const [state, updateState] = useReducer(
  (state, updates) => ({ ...state, ...updates }),
  initialState
);

And then you can update the state by only passing partial updates, like this:

updateState({ occupation: "postman" })
3
  • Should it not be the following? const [state, updateState] = useReducer( (state, updates) => ({ return (...state, ...updates,) }), initialState ); Commented Apr 29, 2022 at 20:13
  • @Ridhuvarsan, yeah, you can use the return keyword if you like. Commented Apr 30, 2022 at 6:44
  • If I understand it correctly, this is still just shallow-copying?
    – Ren
    Commented Feb 8, 2023 at 7:41
22

In 2022

If you are looking for the same functionality as this.setState ( came from the class components ) in functional components then this is the answer that helps you a lot.

For Example

You have a state like below and want to update the specific field only from the whole state then you need to use the object destructing every time and sometimes it will be irritating.

const [state, setState] = useState({first: 1, second: 2});

// results will be state = {first: 3} instead of {first: 3, second: 2}
setState({first: 3})

// To resolve that you need to use object destructing every time
// results will be state = {first: 3, second: 2}
setState(prev => ({...prev, first: 3}))

To solve that I came up with the useReducer approach. Please check useReducer.

const stateReducer = (state, action) => ({
  ...state,
  ...(typeof action === 'function' ? action(state) : action),
});
const [state, setState] = useReducer(stateReducer, {first: 1, second: 2});

// results will be state = {first: 3, second: 2}
setState({first: 3})

// you can also access the previous state callback if you want
// results will remain same, state = {first: 3, second: 2}
setState(prev => ({...prev, first: 3}))

You can store that stateReducer in utils files and import it in every file if you want.

Here is the custom hook if you want.

import React from 'react';

export const stateReducer = (state, action) => ({
  ...state,
  ...(typeof action === 'function' ? action(state) : action),
});

const useReducer = (initial, lazyInitializer = null) => {
  const [state, setState] = React.useReducer(stateReducer, initial, init =>
    lazyInitializer ? lazyInitializer(init) : init
  );

  return [state, setState];
};

export default useReducer;

Typescript

import React, { Dispatch } from "react";

type SetStateAction<S> = S | ((prev: S) => S);

type STATE<R> = [R, Dispatch<SetStateAction<Partial<R>>>];

const stateReducer = (state, action) => ({
  ...state,
  ...(typeof action === "function" ? action(state) : action),
});

const useReducer = <S>(initial, lazyInitializer = null): STATE<S> => {
  const [state, setState] = React.useReducer(stateReducer, initial, (init) =>
    lazyInitializer ? lazyInitializer(init) : init,
  );

  return [state, setState];
};

export default useReducer;
6
  • Instead of setState(prev => ({...prev, first: 3})), isn't it easier to do it like this: setState({...state, first: 3}); It provides the same result Commented Feb 27, 2022 at 12:12
  • 2
    no, it's not the same in every case, react recommend doing with callback because it always gives you the updated result. Commented Feb 27, 2022 at 18:31
  • What about the return statement of stateReducer function? Commented Apr 29, 2022 at 20:14
  • Its is returning the Object of state and action @Ridhuvarshan Commented May 1, 2022 at 15:34
  • @NishargShah, Where does the state actually get updated. This function is surrounded by braces, so there should be a const stateReducer = (state, action) => ({ return {...state, ...(typeof action === "function" ? action(state) : action)} }); right? Commented May 2, 2022 at 14:54
12

Thanks Philip this helped me - my use case was I had a form with lot of input fields so I maintained initial state as object and I was not able to update the object state.The above post helped me :)

const [projectGroupDetails, setProjectGroupDetails] = useState({
    "projectGroupId": "",
    "projectGroup": "DDD",
    "project-id": "",
    "appd-ui": "",
    "appd-node": ""    
});

const inputGroupChangeHandler = (event) => {
    setProjectGroupDetails((prevState) => ({
       ...prevState,
       [event.target.id]: event.target.value
    }));
}

<Input 
    id="projectGroupId" 
    labelText="Project Group Id" 
    value={projectGroupDetails.projectGroupId} 
    onChange={inputGroupChangeHandler} 
/>


7

You have to use Rest parameters and spread syntax (https://javascript.info/rest-parameters-spread) AND set a function with preState as the argument of the setState.

Does not work (missing function)

[state, setState] = useState({})
const key = 'foo';
const value = 'bar';
setState({
  ...state,
  [key]: value
});

Does work!

[state, setState] = useState({})
const key = 'foo';
const value = 'bar';
setState(prevState => ({
  ...prevState,
  [key]: value
}));
6

I have given both Append, Whole object update, Specific key update examples for the solve

Append and modify both can be done by a simple step. I think this is more stable and safe which has no immutable or mutable dependency.

This is how you can append new object

setExampleState(prevState => ({
    ...prevState,
    masterField2: {
        fieldOne: "c",
        fieldTwo: {
            fieldTwoOne: "d",
            fieldTwoTwo: "e"
        }
    },
}))

Suppose you want to modify again the masterField2 object. There can be two situation. You want to update the whole object or update a specific key of the object.

Update the whole object - So here the whole value for key masterField2 will be updated.

setExampleState(prevState => ({
    ...prevState,
    masterField2: {
        fieldOne: "c",
        fieldTwo: {
            fieldTwoOne: "d",
            fieldTwoTwo: "e"
        }
    },
}))

But what if you wanted to change only fieldTwoOne key inside the masterField2 object. You do the following.

let oldMasterField2 = exampleState.masterField2
oldMasterField2.fieldTwo.fieldTwoOne = 'changed';
setExampleState(prevState => ({
    ...prevState,
    masterField2: oldMasterField2
}))
4
function App() {

  const [todos, setTodos] = useState([
    { id: 1, title: "Selectus aut autem", completed: false },
    { id: 2, title: "Luis ut nam facilis et officia qui", completed: false },
    { id: 3, title: "Fugiat veniam minus", completed: false },
    { id: 4, title: "Aet porro tempora", completed: true },
    { id: 5, title: "Laboriosam mollitia et enim quasi", completed: false }
  ]);

  const changeInput = (e) => {todos.map(items => items.id === parseInt(e.target.value) && (items.completed = e.target.checked));
 setTodos([...todos], todos);}
  return (
    <div className="container">
      {todos.map(items => {
        return (
          <div key={items.id}>
            <label>
<input type="checkbox" 
onChange={changeInput} 
value={items.id} 
checked={items.completed} />&nbsp; {items.title}</label>
          </div>
        )
      })}
    </div>
  );
}
2

Initially I used object in useState, but then I moved to useReducer hook for complex cases. I felt a performance improvement when I refactored the code.

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 React docs

I already implemented such hook for my own use:

/**
 * Same as useObjectState but uses useReducer instead of useState
 *  (better performance for complex cases)
 * @param {*} PropsWithDefaultValues object with all needed props 
 * and their initial value
 * @returns [state, setProp] state - the state object, setProp - dispatch 
 * changes one (given prop name & prop value) or multiple props (given an 
 * object { prop: value, ...}) in object state
 */
export function useObjectReducer(PropsWithDefaultValues) {
  const [state, dispatch] = useReducer(reducer, PropsWithDefaultValues);

  //newFieldsVal={[field_name]: [field_value], ...}
  function reducer(state, newFieldsVal) {
    return { ...state, ...newFieldsVal };
  }

  return [
    state,
    (newFieldsVal, newVal) => {
      if (typeof newVal !== "undefined") {
        const tmp = {};
        tmp[newFieldsVal] = newVal;
        dispatch(tmp);
      } else {
        dispatch(newFieldsVal);
      }
    },
  ];
}

more related hooks.

2

, do it like this example :

first creat state of the objects:

const [isSelected, setSelection] = useState([{ id_1: false }, { id_2: false }, { id_3: false }]);

then change the value on of them:

// if the id_1 is false make it true or return it false.

onValueChange={() => isSelected.id_1 == false ? setSelection([{ ...isSelected, id_1: true }]) : setSelection([{ ...isSelected, id_1: false }])}
1

I think best solution is Immer. It allows you to update object like you are directly modifying fields (masterField.fieldOne.fieldx = 'abc'). But it will not change actual object of course. It collects all updates on a draft object and gives you a final object at the end which you can use to replace original object.

1

Answers are already there but This type isn't mentioned so take look at the example of this kind ...

 const[data,setdata]= useState({
    username: [
      email,
      "required", 
      //...some additional codes
    ],
    password: [
      password,
      "required|password-5",
     //..additional code if any..
    ],
  })

**To update the state variable email in this example in the input field you can add similar code with your variable name **

<Input
  onChangeText={(t) => setdata(prevState => ({
    ...prevState,
    username:{ [0]: t }
  }))}
  value={data.username[0]}
/>
0

Your Object for which you want to make state

let teams = {
  team: [
    {
      name: "one",
      id: "1"
    },
  ]
}

Making State of teams object

const [state, setState] = useState(teams);

Update State like this

setState((prevState)=>({...prevState,team:[
     ...prevState.team,
     {
     name: "two",
      id: "2"
     }
]}))

After the updation State becomes

{
  team: [
    {
      name: "one",
      id: "1"
    },
    {
      name: "two",
      id: "2"
    }
  ]
}

To Render items according to current state use Map function

{state.team.map((curr_team) => {
      return (
        <div>
           <p>{curr_team.id}</p>
           <p>{curr_team.name}</p>
        </div>
      )
})}
0

If you work with boolean values and arrays This can help you:

const [checkedOrders, setCheckedOrders] = useState<Record<string, TEntity>>({});

const handleToggleCheck = (entity: TEntity) => {
  const _checkedOrders = { ...checkedOrders };
  const isChecked = entity.id in checkedOrders;

  if (isChecked) {
    delete _checkedOrders[entity.id];
  } else {
    _checkedOrders[entity.id] = entity;
  }

  setCheckedOrders(_checkedOrders);
};
0

Achieving immutability in JavaScript can be a bit tricky, especially with nested structures. Using JSON.parse(JSON.stringify(obj)) is indeed one way to make a deep copy of the state before mutating it, as React's state should always be treated as immutable. Here's how you might do that:

Example A (Appending a field):

const appendField = () => {
    // make a deep copy of the state
    let newState = JSON.parse(JSON.stringify(exampleState));

    newState.masterField2 = {
        fieldOne: "c",
        fieldTwo: {
            fieldTwoOne: "d",
            fieldTwoTwo: "e"
        }
    };
    
    // Now we set the new state
    setExampleState(newState);
};

You're essentially making a deep clone of the existing state, adding a new field (masterField2), and then updating the state with setExampleState.

Example B (Changing values):

const changeFieldValues = () => {
    // make a deep copy of the state
    let newState = JSON.parse(JSON.stringify(exampleState));

    newState.masterField = {
        fieldOne: "e",
        fieldTwo: {
            fieldTwoOne: "f",
            fieldTwoTwo: "g"
        }
    };
    
    // Now we set the new state
    setExampleState(newState);
};

In this scenario, you clone the original state, mutate the desired values, and then use setExampleState to update the state with the new object.

Please remember! These methods will work fine while dealing with small state, but JSON parsing and stringifying methods are computation intensive operations and can decrease performance when dealing with large state objects. There are packages such as lodash which can perform deep cloning, assign defaults and help with more complex state management functionalities. Always remember to weigh the benefits and drawbacks of each method based on your specific use case.

1
-1

I leave you a utility function to inmutably update objects

/**
 * Inmutable update object
 * @param  {Object} oldObject     Object to update
 * @param  {Object} updatedValues Object with new values
 * @return {Object}               New Object with updated values
 */
export const updateObject = (oldObject, updatedValues) => {
  return {
    ...oldObject,
    ...updatedValues
  };
};

So you can use it like this

const MyComponent = props => {

  const [orderForm, setOrderForm] = useState({
    specialities: {
      elementType: "select",
      elementConfig: {
        options: [],
        label: "Specialities"
      },
      touched: false
    }
  });


// I want to update the options list, to fill a select element

  // ---------- Update with fetched elements ---------- //

  const updateSpecialitiesData = data => {
    // Inmutably update elementConfig object. i.e label field is not modified
    const updatedOptions = updateObject(
      orderForm[formElementKey]["elementConfig"],
      {
        options: data
      }
    );
    // Inmutably update the relevant element.
    const updatedFormElement = updateObject(orderForm[formElementKey], {
      touched: true,
      elementConfig: updatedOptions
    });
    // Inmutably update the relevant element in the state.
    const orderFormUpdated = updateObject(orderForm, {
      [formElementKey]: updatedFormElement
    });
    setOrderForm(orderFormUpdated);
  };

  useEffect(() => {
      // some code to fetch data
      updateSpecialitiesData.current("specialities",fetchedData);
  }, [updateSpecialitiesData]);

// More component code
}

If not you have more utilities here : https://es.reactjs.org/docs/update.html

-2

I think a more elegant solution will be to create the updated state object, while retaining the previous values of state. The Object property which is needed to be updated can be provided in the form of array something like this -

import React,{useState, useEffect} from 'react'
export default function Home2(props) {
    const [x, setX] = useState({name : '',add : {full : '', pin : '', d : { v : '' }}})
    const handleClick = (e, type)=>{
        let obj = {}
        if(type.length > 1){
            var z = {}
            var z2 = x[type[0]]
        
        type.forEach((val, idx)=>{
            if(idx === type.length - 1){
                z[val] = e.target.value
            }
            else if(idx > 0){
                Object.assign(z , z2) /*{...z2 , [val]:{} }*/
                z[val] = {}
                z = z[val]
                z2 = z2[val]
            }else{
                z = {...z2}
                obj = z
            }
        })
    }else obj = e.target.value
    setX( { ...x ,   [type[0]] : obj  } )
    
}
return (
    <div>
        <input value = {x.name} onChange={e=>handleClick(e,["name"])}/>
        <input value = {x.add.full} onChange={e=>handleClick(e,["add","full"])}  />
        <input value = {x.add.pin} onChange={e=>handleClick(e,["add","pin"])}  /><br/>
        <input value = {x.add.d.v} onChange={e=>handleClick(e,["add","d","v"])}  /><br/>
        {x.name} <br/>
        {x.add.full} <br/>
        {x.add.pin} <br/>
        {x.add.d.v}
    </div>
)
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.