Why the State Value Does Not Reset to Its Initial Value on Re-Render? Know the Real Reason🔥

Why the State Value Does Not Reset to Its Initial Value on Re-Render? Know the Real Reason🔥

In React, state persists across re-renders because React preserves the state of a component between renders. This ensures that the UI remains interactive and updates dynamically without losing state values.

Why Does State Persist?

- React re-renders components when state or props change, but it does not reinitialize the state.
- The state is preserved in memory between renders, ensuring data consistency.
- The component function is executed again, but the state remains unchanged unless updated explicitly.

Example Code

    
import React, { useState } from "react";

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

  return (
    

      
Count: {count}
       setCount(count + 1)}
        className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600"
      >
        Increment
      
    
  );
}
    
  

How to Reset State?

- To reset state manually, use the setter function inside an event handler.
- You can also reset state by updating the component’s key to force a re-mount.

Example: Resetting State

    
import React, { useState } from "react";

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

  return (
    

      
Count: {count}
       setCount(count + 1)} className="px-4 py-2 bg-blue-500 text-white rounded-md">
        Increment
      
       setCount(0)} className="ml-2 px-4 py-2 bg-red-500 text-white rounded-md">
        Reset
      
    
  );
}