Updating an array in React using Hooks

Question

I'm trying to figure out the working of React Hook API. I'm trying to add a number to a list. The code that I commented, i.e myArray.push... doesn't seem to perform the operation, though the code below it is working fine. Why is it so?

import React, {useState} from 'react'

export default () => {

  const [myArray, setArray] = useState([1,2,3])

  return (
    <div>
      {myArray.map((item=>{

        return <li>{item}</li>

      }))}
      <button onClick = {()=>{

        // myArray.push(myArray[myArray.length-1]+1)
        // setArray(myArray)

        setArray([...myArray, myArray[myArray.length-1]+1])

      }}>Add</button>
    </div>
  )
}

Is there any reason you're trying to implement a stateful component as a functional component? — CerebralFart
– CerebralFart, Commented Feb 19, 2019 at 15:55
I believe myArray is this.state.myArray and as usual, you shouldn't mutate the state so previously you never this.state.myArray.push(....), which also means you shouldn't try to myArray.push now — Isaac
– Isaac, Commented Feb 19, 2019 at 15:58
[...myArray, myArray[myArray.length-1]+1] !== myArray, which will cause the component to re-render. — Tholle
– Tholle, Commented Feb 19, 2019 at 16:01
@JithinKs That's right. React will do a strict === comparison under the hood, and since myArray.push just adds another element to the existing array, it will not re-render. [...myArray, myArray[myArray.length-1]+1] however creates an entirely new array. If you stick to the rule of thumb to not mutate the state directly, you will not run into these issues. — Tholle
– Tholle, Commented Feb 19, 2019 at 16:18

Henry Heath · Accepted Answer · 2021-03-24 18:32:27Z

24

I would recommend using useReducer for anything more complicated than a single value.

function App() {
  const [input, setInput] = useState(0);

  const [myArray, dispatch] = useReducer((myArray, { type, value }) => {
    switch (type) {
      case "add":
        return [...myArray, value];
      case "remove":
        return myArray.filter((_, index) => index !== value);
      default:
        return myArray;
    }
  }, [1, 2, 3]);

  return (
    <div>
      <input value={input} onInput={e => setInput(e.target.value)} />
      <button onClick={() => dispatch({ type: "add", value: input})}>
        Add
      </button>

      {myArray.map((item, index) => (
        <div>
          <h2>
            {item}
            <button onClick={() => dispatch({ type: "remove", value: index })}>
              Remove
            </button>
          </h2>
        </div>
      ))}
    </div>
  );
}

edited Mar 24, 2021 at 18:32

Henry Heath

1,08211 silver badges20 bronze badges

answered Feb 19, 2019 at 16:35

K..

4,2538 gold badges50 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shubham Khatri · Accepted Answer · 2019-02-19 16:19:29Z

8

You aren't mutating the array in the commenting code and hence when you try to setState, hooks internally check that the same state is being passed due to reference not updating for myArray and hence, won't trigger a re-render again.

However in the working code, you are creating a new array instance and hence the update is working correctly

answered Feb 19, 2019 at 16:19

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

1 Comment

Douglas Gaskell Over a year ago

So you have to clone an array to update an array...? That seems necessarily expensive no?

Simon Gagnon · Accepted Answer · 2020-11-26 17:34:46Z

2

You can use a way to deep clone an object and use it as a temporary variable to change the value of your array.

Here an example with your code :

import React, { useState } from 'react'

export default () => {
  const [myArray, setArray] = useState([1, 2, 3])
  var tmpArray = JSON.parse(JSON.stringify(myArray))

  return (
    <div>
      {myArray.map((item) => {
        return <li>{item}</li>
      })}
      <button
        onClick={() => {
          tmpArray.push(tmpArray[tmpArray.length - 1] + 1)
          setArray(tmpArray)
        }}
      >
        Add
      </button>
    </div>
  )
}

answered Nov 26, 2020 at 17:34

Simon Gagnon

214 bronze badges

Comments

Fischer Tirado · Accepted Answer · 2023-01-16 04:10:59Z

0

Using map works better.

    setArray(array.map(f=>{
        if(f.name===name) f.checked = checked //your code here
        return f
    }))

answered Jan 16, 2023 at 4:10

Fischer Tirado

3353 silver badges5 bronze badges

Collectives™ on Stack Overflow

Updating an array in React using Hooks

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related