Why React is not rendering after change in state? [functional component]

Question

import React, {useState, useEffect} from 'react';

import MakeCard from './MakeCard.js';

export default function GameCards(props) {
  const [images, setImages] = useState([{}]);

  // Render component after fetching images
  useEffect(() => {
    getImages(props.cards).then(images => setImages(images));
  }, [props.cards]);

  // shuffle images and update state.
  const shuffleCards = (e) => {
    console.log("clicked");
    let newImages = images;
    for (let i = newImages.length - 1; i >= 0; i--) {
      let temp, j;
      j = Math.floor(Math.random() * i);
      temp = newImages[i];
      newImages[i] = images[j];
      newImages[j] = temp;
    }
    setImages(newImages);
    console.log("newImages: ", images);
  }

  if (images.length === 0) {
    return (<h1>Loading...</h1>)
  } else {
    return (<div>
      {
        images.map((image, i) => <MakeCard image={image} key={i}
          // shuffleCards={shuffleCards} 
        />)
      }
    </div>)
  }
}

So I am trying to make a Memory_Card_Game in react but when I shuffle the image array(when the user clicks on the image) which is a state variable. React does not render. I read in the documentation that react updates the virtual-DOM tree when there is a change in the state of the component. Why it isn't rendering after change in images array ?

const [images, setImages] = useState([{}]);

I have provided only necessary code.

Coder_H
– Coder_H

2021-03-23 18:19:24 +00:00
Commented Mar 23, 2021 at 18:19 — Coder_H
– Coder_H, Commented Mar 23, 2021 at 18:19

Tiago Coelho · Accepted Answer · 2021-03-23 18:24:37Z

6

You are mutating the original images array.

You set newImages = images (which is just a reference not a copy) and then change positions in newImages.

That effectively changes the original array, and so when react compares the newImages you pass to setImages with the previous images they are the same array and so, no change is detected.

You can fix it with let newImages = [...images];

answered Mar 23, 2021 at 18:24

Tiago Coelho

5,10313 silver badges17 bronze badges

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

1 Comment

Coder_H Over a year ago

Thanks for your answer. I thought assigning the original array to a new variable is fine.

Cristian Riță · Accepted Answer · 2021-03-23 18:26:59Z

1

Your newImages array is basically the same array(same reference). Try this:

const shuffleCards = (e) => {
    console.log("clicked");
    const newImages = [...images];
    for(let i = newImages.length - 1; i >= 0; i--){
      let temp, j;
      j = Math.floor(Math.random() * i);
      temp = newImages[i];
      newImages[i] = images[j];
      newImages[j] = temp;
    }
    setImages(newImages);
    console.log("newImages: ", images);
  }

This way we create a clone of the image array.

answered Mar 23, 2021 at 18:26

Cristian Riță

5593 silver badges13 bronze badges

1 Comment

Coder_H Over a year ago

Thanks for answering.

Shubham Khatri · Accepted Answer · 2021-03-23 18:26:59Z

1

Since you are mutating the array and setting the state with the same reference of the array, react chooses to not re-render the component. This happens because React uses Object.is comparison while checking if a re-render neeeds to happens after a setState. The idea is to returns a new reference of the array and not mutate the original array. You can make it work by shallow copying the original array with spread syntax

const shuffleCards = (e) => {
    console.log("clicked");
    // Shallow clone the array
    let newImages = [...images];
    for(let i = newImages.length - 1; i >= 0; i--){
      let temp, j;
      j = Math.floor(Math.random() * i);
      temp = newImages[i];
      newImages[i] = images[j];
      newImages[j] = temp;
    }
    setImages(newImages);
    console.log("newImages: ", images);
  }

answered Mar 23, 2021 at 18:26

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

2 Comments

Shubham Khatri Over a year ago

Glad to have helped.

Shubham Khatri Over a year ago

Please consider marking the answer as accepted if it helped solve your problem

marcos · Accepted Answer · 2021-03-23 18:26:52Z

0

React uses Object.is comparison algorithm to check for change in a state variable, in this case images which is an Array, so instead of changing in place its value, u should create a new one each time, for example:

const newImages = [...images]; // instead of "let newImages = images";

answered Mar 23, 2021 at 18:26

marcos

4,5101 gold badge13 silver badges26 bronze badges

1 Comment

Coder_H Over a year ago

Thanks for your answer.

Collectives™ on Stack Overflow

Why React is not rendering after change in state? [functional component]

4 Answers 4

1 Comment

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related