Understanding useState in React

useState is a native state management hook in React that allows components to keep track of state between renders.

Logical Breakdown of useState:

1. Define the initial state:
   • useState(10) → Initializes a number.
   • useState("") → Initializes an empty string.
   • useState(() => "Jack") → Uses a lazy initialization function.

2. Destructure the returned array:

   • useState returns an array with two values:
     • The current state value
     • A function to update the state

   • Example:
     

     const [name, setName] = useState("");
     

3. Update state using the setter function (setState)

   • Directly modifying the state variable won't trigger a re-render.

   • Always use the setter function to update state:
     

     setName("Alice"); // Correct 
     name = "Alice"; // Won't update state
     

Why use setState instead of modifying the variable?

• For primitive data types (numbers, strings, booleans):
  • Changing the variable only creates a local copy. React won’t recognize the change*.*
• For reference types (arrays, objects):
  • Modifying the variable directly mutates the original state, which React might not track.
  • Best practice is to spread the existing state and then update it.

Updating an Array in State (Best Practice)

const [items, setItems] = useState(["Apple", "Banana"]);

// Incorrect(Direct mutation)
items.push("Orange");
setItems(items);

// Correct (Create a new array)
setItems([...items, "Orange"]);

Updating an Object in State (Best Practice)

const [user, setUser] = useState({ name: "Jack", age: 25 });

// Incorrect (Direct mutation)
user.name = "Alice";
setUser(user);

// Correct (Create a new object)
setUser({ ...user, name: "Alice" });