State in React
Imagine you have a box that holds a number. When you press a button, you want the number inside the box to increase by 1. How does the box "remember" what number it currently holds? How does it know to update the number on the screen when it changes? This is where **state** comes into play.
What is State in React?
State is a JavaScript object that holds data that can change over time. It represents the parts of your application that can change based on user actions, network responses, or anything else. When state changes, React automatically re-renders the component to reflect the new state on the screen.
Think of state as the "memory" of a component. It remembers things that can change, like whether a user is logged in, the current count, or the text inside an input field.
Why Do We Need State?
Without state, React components would be static. They could only display data that never changes. State makes your apps interactive and dynamic.
- User Interaction: A counter that increments when you click a button needs to remember the current count.
- Forms: Input fields need to remember what the user typed.
- API Data: Data fetched from an API needs to be stored somewhere.
- UI State: Whether a modal is open or closed, which tab is active, etc.
State vs. Regular Variables
You might wonder: why not just use a regular variable? Let's see the difference:
function Counter() { let count = 0; <!-- Regular variable -->
function increment() { count = count + 1; console.log(count); <!-- This will log 1, 2, 3... but the UI won't update! --> }
return <button onClick={increment}>{count}</button>;}In this example, the variable `count` will increase, but the button will always show `0` because React doesn't know that the variable changed. React only re-renders when state changes.
How to Use State
In modern React, we use the `useState` hook to add state to functional components.
import React, { useState } from 'react';
function Counter() { const [count, setCount] = useState(0);
function increment() { setCount(count + 1); }
return <button onClick={increment}>{count}</button>;}Now when `setCount` is called, React knows that the state has changed and re-renders the component. The button will show the updated count.
Key Characteristics of State
- Mutable: State can be changed (unlike props).
- Private: State is local to the component. Other components cannot directly access it.
- Triggers Re-renders: When state changes, the component re-renders.
- Preserved Between Renders: React remembers the state value between re-renders.
Two Minute Drill
- State is a JavaScript object that holds data that can change over time.
- It gives components "memory" to remember things like user input, counts, or UI states.
- Unlike regular variables, when state changes, React automatically re-renders the component.
- State is local to the component and cannot be directly accessed by other components.
- In functional components, we use the `useState` hook to add state.
- State makes React apps interactive and dynamic.
Need more clarification?
Drop us an email at career@quipoinfotech.com