React Hooks useState with Object

Question

What is the correct way of updating state  is a nested object  in React with Hooks   export Example        gt      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

User · Accepted Answer

You can pass new value like this    setExampleState     exampleState   masterField2            fieldOne   c           fieldTwo               fieldTwoOne   d              fieldTwoTwo   e

User · Answer

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 beautiful 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

User · Answer

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    gt      return          oldObject         updatedValues           So you can use it like this  const MyComponent   props   gt       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   gt           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      gt             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

User · Answer

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    gt        setProjectGroupDetails  prevState    gt               prevState          event target id   event target value              lt Input      id  projectGroupId       labelText  Project Group Id       value  projectGroupDetails projectGroupId       onChange  inputGroupChangeHandler     gt

User · Answer

If anyone is searching for  useState   hooks update for object - Through Input          const  state  setState    useState   fName   quot  quot   lName   quot  quot              const handleChange   e   gt                const   name  value     e target              setState prevState   gt                        prevState                   name   value                                       lt input             value  state fName              type  quot text quot              onChange  handleChange              name  quot fName quot            gt           lt input             value  state lName              type  quot text quot              onChange  handleChange              name  quot lName quot            gt                                   - Through onSubmit or button click              setState prevState   gt                    prevState              fName   your updated value here

User · Answer

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       gt  isSelected id 1    false   setSelection      isSelected  id 1  true      setSelection      isSelected  id 1  false

User · Answer

function App        const  todos  setTodos    useState         id  1  title   quot Selectus aut autem quot   completed  false          id  2  title   quot Luis ut nam facilis et officia qui quot   completed  false          id  3  title   quot Fugiat veniam minus quot   completed  false          id  4  title   quot Aet porro tempora quot   completed  true          id  5  title   quot Laboriosam mollitia et enim quasi quot   completed  false            const changeInput    e    gt   todos map items   gt  items id     parseInt e target value   amp  amp   items completed   e target checked     setTodos     todos   todos      return        lt div className  quot container quot  gt         todos map items   gt            return              lt div key  items id  gt               lt label gt   lt input type  quot checkbox quot   onChange  changeInput   value  items id   checked  items completed    gt  amp nbsp   items title  lt  label gt             lt  div gt                           lt  div gt

User · Answer

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

User · Answer

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  amp  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    gt          if  typeof newVal      quot undefined quot             const tmp               tmp newFieldsVal    newVal          dispatch tmp           else           dispatch newFieldsVal                          more related hooks

User · Answer

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    gt              prevState        major               prevState major          name   Tan Long                      perhaps  setInfoData  prevState    gt              prevState        major               prevState major          name   Tan Long                  minor               prevState minor          collegeRegion   northEast              I hope this helps anyone trying to solve a similar problem

[javascript] React Hooks useState() with Object

Examples related to javascript

Examples related to reactjs

Examples related to react-hooks