What's the difference between useState() and normal variable assignment?

Difference between useState() and Normal Variable Assignment

When working with state in React, it's important to understand the difference between using the useState() hook and normal variable assignment. useState() is a React hook that allows you to create and update state variables, while normal variable assignment simply assigns a value to a variable.

To demonstrate this difference, let's consider the following code:

const useState = React.useState;

function Example() {
  const [name, setName] = useState('apple');
  const name2 = 'orange';

  return (
    

      
{name}
      
{name2}
    
  );
}

ReactDOM.render(, document.getElementById('root'));

In this example, we use useState() to create a state variable called name and initialize it with the value 'apple'. We also assign the value 'orange' to a normal variable called name2.

When this code is rendered, we'll see the following output:

apple
orange

As you can see, both name and name2 are displayed in the browser. However, if we were to change the value of name2, it would not affect the value of name.

This is because useState() creates a state variable that is managed by React, while name2 is just a normal variable. When the value of a state variable changes, React automatically re-renders the component that uses it. However, when the value of a normal variable changes, React is not aware of it and does not re-render the component.

Here's a more practical example to illustrate the difference:

const useState = React.useState;

function SimpleItem(props) {
  const [name, setName] = useState(props.name);
  const name2 = props.name;
  return 
{name} is the same as {name2}
}

function Bad() {

  const [eltArr, setEltArr] = useState(['apple', 'orange', 'fish', 'cat']);

  return (
    

      {eltArr.map((item, i) => {
        return ;
      })}

      
    
  );
}

ReactDOM.render(, document.getElementById('root'))

In this example, we have a SimpleItem component that displays the value of two variables: name and name2. The Bad component uses useState() to create a state variable called eltArr and initializes it with an array of strings. It then uses the map() method to create a list of SimpleItem components, passing each item from the array as a prop to the component.

When this code is rendered, we'll see a list of items, each displaying the same value for both name and name2.

apple is the same as apple
orange is the same as orange
fish is the same as fish
cat is the same as cat

However, if we click the button, the first item in the array will be removed. This will cause React to re-render the Bad component, which will in turn re-render the SimpleItem components.

After the re-render, we'll see that the value of name has changed for the first item, while the value of name2 remains the same.

orange is the same as orange
fish is the same as fish
cat is the same as cat

This is because useState() creates a state variable that is managed by React, while name2 is just a normal variable. When the value of a state variable changes, React automatically re-renders the component that uses it. However, when the value of a normal variable changes, React is not aware of it and does not re-render the component.

In summary, useState() is used to create and update state variables in React, while normal variable assignment is used to assign values to normal variables. State variables are managed by React and automatically trigger re-renders when their values change, while normal variables are not managed by React and do not trigger re-renders.