ReactJS Set State Of An Array

Emir Buğra KÖKSALAN tarafından tarihinde yayınlandı

When you try to set state of an array value then you face that behaviour: state doesn’t change. But you’re sure for change content of array like that:

function User() {
  const [users, setUsers] = useState([
    { id: 1, name: 'Emir' },
    { id: 2, name: 'Bugra' }

  function updateUser(id, name) {
    const user = users.find(user => === id) = name
    console.log('updated users:', users)

  // ... continuing code ...

In console you can see that you set users array correctly. But React doesn’t update state and doesn’t re-render the component. So what is the problem? Problem is about reference. Arrays passes by reference to a function/method and if you pass same reference then ReactJS doesn’t update the state and doesn’t apply re-render. In this example you’re working on same reference array and because of this ReactJS doesn’t apply re-render. For solving this problem you must create brand new array and pass it as new state. You have two ways for creating a new array.

Using Spread Operator

In Javascript you can put an array to another like that: “put all content as seperated”. With this way you can create brand new array reference with coping content in single line and very easy:

const newUsers = [...prevUsers]

Now apply this code to our updateUser() function:

  function updateUser(id, name) {
    const newUsers = [...prevUsers]  // create brand new array with content
    const user = newUsers.find(user => === id) = name
    console.log('updated users:', newUsers)

As you can see we created brand new array which name is newUsers and modify it and set as new state. Now as you can see the state and the re-render problem solved.


There is a different buy a little expensive method for creating new array. You can map an array with/without changing content for creating brand new array.

const newUsers = => item)

This code is same as before. This is only creating brand new array, actually we can put our logic in this syntax like that:

const newUsers = => {
  if ( === id) = name

Happy coding…



Java & PHP Developer

0 yorum

Bir yanıt yazın

Avatar placeholder

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Time limit is exhausted. Please reload the CAPTCHA.

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.