What is the different between state hook vs assign to local variable?

Question

Coming from class-based object-oriented language C#, I can assign an object to a local variable so I can use it later. But in this example, when I assign it to a local variable, it will not render. When I console log the tempPersonObj inside the handleClick, it will print the object. But it will print empty object inside the PersonDetails function.

App.js

import React, {useState} from "react";

const persons = [
  { 
    "name": "Arto Hellas", 
    "number": "040-123456",
    "count": 3,
    "id": 1
  },
  { 
    "name": "Ada Lovelace", 
    "number": "39-44-5323523",
    "count": 10,
    "id": 2
  },
  { 
    "name": "Mary Poppendieck", 
    "number": "39-23-6423122",
    "count": 17,
    "id": 3
  }
]

const PersonDetails = ({person}) => {
  console.log(person)
  return (
    <div>
      <p>-----------------</p>
      <p>{person.name}</p>
      <p>{person.number}</p>
      <p>{person.count}</p>
    </div>
  )
}

const App = () => {

  const [view, setView] = useState(false)
  const [personObj, setPersonObj] = useState({})
  let tempPersonObj = {};

  const handleClick = (person) => {

    //This will work
    // setPersonObj(person)

    //This will not work
    tempPersonObj = person
    console.log(tempPersonObj)

    setView(true)
  }
  return (
    <div>
      <h1>List:</h1>
      {persons.map((person) => {
        return (
        <div key={person.id}>
          {person.name} {""}
          <button onClick={() => handleClick(person)}>View</button>
        </div>
        )})
      }

    {/* This will work */}
    {/* {view && <PersonDetails person={tempPersonObj}/>} */}

    {/* This will not work */}
    {view && <PersonDetails person={personObj}/>}

    </div>
  );
}

export default App

score 1 · Answer 1 · answered Jul 25 '22 at 01:14

React components work by rendering UI as a function of state and props. The tempPersonObj local variable is neither state nor props and is redeclared each render cycle.

In other words, you can mutate tempPersonObj in the handleClick callback and it will update, but when the setView(true) state update is processed and the component rerenders, tempPersonObj is redeclared an empty object. It's a completely new variable unrelated to the tempPersonObj from the previous render cycle.

const App = () => {
  const [view, setView] = useState(false);
  const [personObj, setPersonObj] = useState({});

  let tempPersonObj = {}; // new variable each render cycle

  const handleClick = (person) => {
    //This will work
    // setPersonObj(person)

    //This will not work
    tempPersonObj = person
    console.log(tempPersonObj) // <-- see object mutation

    setView(true)
  }

  return (
    ...

    tempPersonObj // empty object again on next cycle

    ...
  );
}

If you need to update a person object it necessarily needs to be part of React state so it is retained from render cycle to render cycle.

const App = () => {
  const [view, setView] = useState(false);
  const [personObj, setPersonObj] = useState({});

  const handleClick = (person) => {
    setPersonObj(person);
    setView(true);
  }

  return (
    ...
  );
}

What is the different between state hook vs assign to local variable?

1 Answers1