State in React: The Basics
⚛️ State in React: The Basics
When building web apps with React, you often need to track and manage data that changes over time — like user input, API responses, or UI toggles. This is where state comes in.
Let’s break down the basics of state in React, and how you can use it in your apps.
🧠 What Is State?
State is a built-in React object that stores dynamic data in a component. When the state changes, React automatically re-renders the component to reflect the new data in the UI.
🔧 How to Use State (with useState)
React provides a special Hook called useState for functional components.
✅ Example:
jsx
Copy
Edit
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<h2>You clicked {count} times</h2>
<button onClick={() => setCount(count + 1)}>
Click Me
</button>
</div>
);
}
📌 Breakdown:
useState(0) creates a state variable called count, starting at 0.
setCount is a function used to update the value of count.
When setCount is called, the component re-renders with the new count.
🔁 Why State Matters
You use state to handle things like:
Form inputs
Button clicks
API data
Modal open/close
Theme toggles (dark/light)
⚠️ Things to Remember
Don’t update state directly (e.g., count = count + 1 ❌)
Always use the updater function (setCount(count + 1) ✅)
State updates are asynchronous — changes may not show immediately.
🚀 Final Thoughts
State is one of the most powerful features in React. It allows your components to be interactive and responsive to user actions. Once you understand how state works, you'll be well on your way to building dynamic React applications.
Learn React JS Course in Hyderabad
Visit Our Quality Thought Training in Hyderabad
Read More
Comments
Post a Comment