ui is not updating even though useState is changing

user_17490747 0
Viewed 30
import React, { useEffect, useState } from "react";
import "./App.css";

function App() {
const [data, setData] = useState({ count: 1 });

const handleClick = () => {
let temp = data;
data.count += 1;

console.log("temp: ", temp);  // temp: {count: 2}

setData(temp);
console.log(data); //{count: 2}
};

React.useEffect(() => {
console.log("hello");
}, [data]);

 return (
<div className="App">
  {data.count}

   <button onClick={handleClick}>add</button>
 </div>
 );
 }

 export default App;

the state is changing but in the UI display data is not updating. i don't know why? like if I click on the add button the state is changing from

data = {count: 1} to data = {count: 2}

but in the ui display the data remain 1. it is not updating in the ui. so what to do?

reactjs user-interface
2 Answers

In the handleClick method, you are trying to directly mutate the state by incrementing data.count by 1; but we should never mutate the state directly. React compares the previous state with the updated state to decide if the component needs re-rendering; so, if we modify state directly, it will disturb this process. As a result, the component will behave unexpectedly.

Try setting the state like this:

const handleClick = () => {
   setData((prevCount) => ({
     count:prevCount.count + 1
}))};
user_114973640

You can update object state like this.


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

function App() {
  const [data, setData] = useState({ count: 1 });

  const handleClick = () => {
    let temp = data;
    temp.count += 1;
    console.log('temp: ', temp); // temp: {count: 2}
    setData({...temp});
  };

  React.useEffect(() => {
    console.log('hello');
  }, [data]);

  return (
    <div className="App">
      {data.count}

      <button onClick={handleClick}>add</button>
    </div>
  );
}

export default App;

And this is more readable.

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

function App() {
  const [data, setData] = useState({ count: 1 });

  const handleClick = () => {
    setData({ ...data, count: data.count + 1 });
  };

  React.useEffect(() => {
    console.log('hello');
  }, [data]);

  return (
    <div className="App">
      {data.count}

      <button onClick={handleClick}>add</button>
    </div>
  );
}

export default App;
user_155795730
Related