React array did not update despite using useEffect

Question

I am trying to add an element into an array after I click the "click me" button. I did a console log to make sure it went inside the function, but despite the function being call, nothing changes.

I also try using useEffect to check if my variable got update

Relevant code:

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

export default function App() {
  let [test, setTest] = useState(["1", "2", "3"]);

  const onChange = () => {
    console.log("onChange");
    test.unshift("4");
  };

  const cards = () => {
    return (
      <div>
        {test.map((item, i) => (
          <ul key={i}>
            <li>{item}</li>
          </ul>
        ))}
      </div>
    );
  };

  useEffect(() => {
    console.log("cardData ", test);
  }, [test]);

  return (
    <div className="App">
      <button onClick={() => onChange()}>Click me</button>
      {cards()}
    </div>
  );
}

Really need some advice on where did i go wrong

This is my codesandbox link

Amila Senadheera · Accepted Answer · 2021-11-17 08:21:00Z

2

The issue is that you directly mutate the test (test.unshift does mutate the test instance) and rendering does not happen since no reference change was detected (shallow reference is used when rendering happens).

Try this

  const onChange = () => {
    console.log("onChange");

    const testCopy = [...test];
    testCopy.unshift("4");
    setTest(testCopy);
  };

Code sandbox => https://codesandbox.io/s/dark-wildflower-lkf4u?file=/src/App.js:160-302

Another NOT working case can be given like below due to using the same instance reference (test).

  const onChange = () => {
    console.log("onChange");
    test.unshift("4");
    setTest(test);
  };

edited Nov 17, 2021 at 8:21

answered Nov 17, 2021 at 8:12

Amila Senadheera

13.4k16 gold badges31 silver badges48 bronze badges

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

1 Comment

Amila Senadheera Over a year ago

@yongchang, can you please mark this as the answer if it solved your problem?

Aarni Joensuu · Accepted Answer · 2021-11-17 08:12:03Z

0

You are not calling the setTest function, which is the only thing you should be using to mutate the array test. Set the new value using setTest and you should be fine.

answered Nov 17, 2021 at 8:12

Aarni Joensuu

7611 gold badge9 silver badges21 bronze badges

1 Comment

yongchang Over a year ago

i did....click on the same link on my question. i have call the setTest and nothing happens

NeERAJ TK · Accepted Answer · 2021-11-17 08:18:15Z

0

You are altering the state test directly without using setTest .

Mutating the state directly breaks the primary principle of React's unidirectional data flow, making your app fragile and basically ignoring the whole component lifecycle.

Upgrade your onChange function as:

  const onChange = () => {
    console.log("onChange");
    setTest([...test, "4"]);
  };

Check demo.

answered Nov 17, 2021 at 8:18

NeERAJ TK

2,7151 gold badge18 silver badges34 bronze badges

Comments

Sojin Antony · Accepted Answer · 2021-11-17 08:18:58Z

It is because you are directly mutating the state, you need to use the useState function hook to update the value of a state variable.

here is my solution https://codesandbox.io/s/determined-perlman-436el?file=/src/App.js:0-727

export default function App() {
  let [test, setTest] = useState(["1", "2", "3"]);

  const onChange = () => {
    console.log("onChange");
    setTest(["4", ...test]);
  };

  const cards = () => {
    return (
      <div>
        {test.map((item, i) => (
          <ul key={i}>
            <li>{item}</li>
          </ul>
        ))}
      </div>
    );
  };

  useEffect(() => {
    console.log("cardData ", test);
  }, [test]);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={() => onChange()}>Click me</button>
      {cards()}
    </div>
  );
}

Gabriele Petrioli · Accepted Answer · 2021-11-17 08:20:49Z

0

There are 2 issues with your code

you are mutating the state with test.unshift
you do not use the setTest

try

  const onChange = () => {
    console.log("onChange");
    const updatedTest = [...test];
    updatedTest.unshift("4");
    setTest(updatedTest);
  };

edited Nov 17, 2021 at 8:20

answered Nov 17, 2021 at 8:13

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

1 Comment

Gabriele Petrioli Over a year ago

@giorgimoniava fair point, updated code.

Collectives™ on Stack Overflow

React array did not update despite using useEffect

5 Answers 5

1 Comment

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related