Feed Reader BotФотография
DEV Community: react React Mastery Series – Day 7: State in React – Making Components Dynamic
Welcome back to the React Mastery Series!
In the previous article, we explored Props, which allow parent components to pass data to child components.
But what happens when the data needs to change over time?
Think about applications you use every day:
* A shopping cart where items are added or removed.
* A banking app where the account balance updates after a transaction.
* A social media app where the number of likes increases instantly.
* A to-do app where tasks are marked as completed.
These applications are interactive because they use State.
Today, we'll understand one of the most fundamental concepts in React—State. What is State? State is data that belongs to a component and can change over time.
Unlike props, which are passed from a parent component and are read-only, state is owned and managed by the component itself.
When state changes, React automatically re-renders the component to reflect the updated UI.
Think of state as the component's memory. Why Do We Need State? Imagine building a counter application.
Without state: function Counter() { let count = 0; return ( h2>{count}h2> button>Incrementbutton> ); } Clicking the button won't change the displayed value because React doesn't know that count has changed.
To make the UI reactive, React provides State. Introducing the useState Hook In functional components, state is managed using the useState Hook. import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return ( h2>{count}h2> button onClick={() => setCount(count + 1)} >
Increment button> ); } When the button is clicked:
1. setCount() updates the state.
2. React schedules a re-render.
3. The updated value appears on the screen.
No manual DOM manipulation is required. Understanding useState const [count, setCount] = useState(0); Let's break it down. count → Current state value
setCount → Function used to update state
0 → Initial state value Every time setCount() is called, React updates the state and re-renders the component. State Drives the UI A key React principle is: The UI is a function of State.
Consider a login screen. isLoggedIn = false
↓
Show Login Button After authentication: isLoggedIn = true
↓
Show Dashboard The UI changes automatically because the underlying state has changed. Updating State Always use the setter function returned by useState.
Correct: setCount(count + 1); Incorrect: count = count + 1; Directly modifying the state variable does not notify React, so the UI will not update. Updating State Based on Previous State Sometimes multiple state updates happen close together.
Instead of: setCount(count + 1); Prefer the functional update form: setCount((previousCount) => previousCount + 1); Why?
Because React may batch state updates for better performance.
Using the previous state guarantees you're working with the latest value. State Can Store Any JavaScript Value State isn't limited to numbers. String const [name, setName] = useState("Siva"); Boolean const [isLoggedIn, setIsLoggedIn] = useState(false); Array const [tasks, setTasks] = useState([]); Object const [user, setUser] = useState({ name: "Siva", city: "Dubai", }); Updating Objects in State Never modify an object directly.
Incorrect: user.name = "John"; Correct: setUser({ ...user, name: "J[...]