REACT Tutorial

STATE IN REACT

State in React

State is a built-in React object that allows components to hold and manage their own dynamic data. Unlike props, which are passed down and read-only, state can change within the component over time.

Why Use State?

State makes your components interactive. For example, a button click can update the state, causing the component to re-render with new data — all without refreshing the page.

import React, { useState } from 'react';

function Counter() {

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

  return (

    <div style={{ textAlign: 'center' }}>

      <p>Count: {count}</p>

      <button onClick={() => setCount(count + 1)}>Increase</button>

    </div>

  );

}

Here, the useState hook initializes count at 0. Clicking the button calls setCount to update the state, which triggers a UI update.

Key Points about State

State is local and encapsulated within the component.
Updating state causes the component to re-render.
State updates may be asynchronous, so don't rely on immediate changes.
Never mutate state directly — always use the updater function.

Pro Tip: Use useState for simple state management, and explore useReducer or external libraries for complex states.

🌟 Enjoyed Learning with Us?

Help others discover Technorank Learning by sharing your honest experience.
Your support inspires us to keep building!