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

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

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

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

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

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

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

[javascript] React Hooks useState() with Object

Examples related to javascript

Examples related to reactjs

Examples related to react-hooks