State is used to manage data that changes within a component. Unlike props, state is mutable and controlled by the component itself.

Using the useState Hook

1. Import useState

   import { useState } from 'react';
   

2. Initialize state

   const [count, setCount] = useState(0);
   

3. Update state

   setCount(count + 1);
   

Example of State

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
}

Updating and Managing State

1. Updating State

   • State updates are asynchronous. React batches multiple state updates for performance.
   • Use the previous state for calculations

   setCount((prevCount) => prevCount + 1);
   

2. Managing Complex State

   • For objects or arrays, update using the spread operator

   const [user, setUser] = useState({ name: "John", age: 25 });
   setUser((prevUser) => ({ ...prevUser, age: 26 }));
   

3. Conditional Rendering Based on State

   function Toggle() {
   const [isOn, setIsOn] = useState(false);
   
   return (
       <button onClick={() => setIsOn(!isOn)}>
           {isOn ? "ON" : "OFF"}
       </button>
       );
   }
   

4. State in Forms Manage input fields using state

   function Form() {
   const [name, setName] = useState("");
   
   return (
           <input
               type="text"
               value={name}
               onChange={(e) => setName(e.target.value)}
           />
       );
   }
   

Summary

• Props make components reusable by passing dynamic data.
• State manages component-specific data that changes over time.

References

• https://www.freecodecamp.org/news/full-guide-to-react-hooks/