React reload on setState of an array

Question

I just started with react and next. I was wondering why the value is reloading on the webpage when I update a useState like this [test, setTest] = useState("test"), but not in the case below. Can anyone explain why and how to fix it?

const [testing, setTest] = useState({
        name:"test"
    })

    function test(){
        setTest(old =>{
            old.name = "new name"
            return old;
        })
    }

    return (
        <ThemeProvider theme={theme>
            <button onClick={test} />
            <GlobalStyles/>

            <h1>{testing.name}</h1>
        </ThemeProvider>
    )

Nicholas Tower · Accepted Answer · 2022-04-06 13:39:09Z

1

One of the core principles of react is that state is immutable. After you set state, react is going to do a === between the old state and the new state. If that results in true, then react believes that nothing has changed and skips rendering. Since you are mutating the state, it will pass an ===, and react cannot tell that you mutated the object.

So instead of mutating the state object, you will need to create a new one:

setTest(old => {
  return {
    ...old,
    name: "new name"
  }
})

answered Apr 6, 2022 at 13:39

Nicholas Tower

87.1k10 gold badges115 silver badges127 bronze badges

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

Comments

David Odinaka Enyoghasim · Accepted Answer · 2022-04-06 13:38:18Z

0

try

 function test(){
            setTest({...testing,name : "new name"})
        }

answered Apr 6, 2022 at 13:38

David Odinaka Enyoghasim

2002 silver badges13 bronze badges

Collectives™ on Stack Overflow

React reload on setState of an array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related