Basics of State-driven UI updates
State-driven UI means the UI automatically updates whenever the component state changes.
This is one of the core concepts of React.
What is State?
State is data stored inside a component that can change over time.
When state changes:
- React automatically re-renders the UI
- The screen updates dynamically
- No manual DOM manipulation is needed
Why State is Important?
- Create dynamic UI
- Handle user interactions
- Update data in real time
- Build interactive applications
- Keep UI synced with data
Without React State
Traditional JavaScript manually updates the DOM.
[code theme="dark"]
document.getElementById("count").innerHTML = 1;
[/code]
This becomes difficult in large applications.
With React State
React automatically updates the UI.
[code theme="dark"]
const [count,setCount] = useState(0);
[/code]
Basic State Example
[code theme="dark"]
import {useState} from "react";
function Counter(){
const [count,setCount] = useState(0);
return(
{count}
);
}
[/code]
How It Works?
- count → Current state value
- setCount → Updates the state
- UI automatically re-renders after update
What is Re-rendering?
When state changes, React updates the component UI.
This process is called:
[code theme="dark"]
Re-rendering
[/code]
State Flow
React follows:
[code theme="dark"]
State Change → Re-render → Updated UI
[/code]
Dynamic Input Example
[code theme="dark"]
import {useState} from "react";
function InputExample(){
const [name,setName] = useState("");
return(
setName(e.target.value)}
/>
{name}
);
}
[/code]
How This Works?
- User types input
- State updates
- UI updates automatically
Conditional UI Rendering
State controls what appears on screen.
Example
[code theme="dark"]
function App(){
const [isLogin,setIsLogin] = useState(false);
return(<>
{isLogin ?
:
}
);
}
[/code]
List Rendering with State
[code theme="dark"]
function Users(){
const [users,setUsers] = useState([
"John",
"Alex",
"Sam"
]);
return(
{users.map((user)=>(
- {user}
))}
);
}
[/code]
State with Objects
[code theme="dark"]
const [user,setUser] = useState({
name:"John",
age:25
});
[/code]
Updating Object State
[code theme="dark"]
setUser({
...user,
age:30
});
[/code]
Why Spread Operator is Used?
React state updates should not mutate existing state directly.
State with Arrays
[code theme="dark"]
const [items,setItems] = useState([]);
[/code]
Add Item Example
[code theme="dark"]
setItems([...items,"New Item"]);
[/code]
Loading State Example
[code theme="dark"]
const [loading,setLoading] = useState(true);
[/code]
Conditional Loading UI
[code theme="dark"]
{
loading ?
:
}
[/code]
Form State Example
[code theme="dark"]
const [email,setEmail] = useState("");
const [password,setPassword] = useState("");
[/code]
Toggle State Example
[code theme="dark"]
const [open,setOpen] = useState(false);
[/code]
Modal Example
[code theme="dark"]
{
open &&
}
[/code]
State Lifting
Sometimes multiple components need shared state.
Then state is moved to the parent component.
Example
[code theme="dark"]
[/code]
Parent manages shared state.
Props + State Flow
Usually:
[code theme="dark"]
Parent State → Props → Child Component
[/code]
Local State vs Global State
|
Local State
|
Global State
|
|
Component-specific
|
Shared across app
|
|
useState
|
Redux / Context / Zustand
|
|
Smaller scope
|
App-wide scope
|
Performance & State
Too many unnecessary state updates can reduce performance.
Common Problems
- Too much state
- Unnecessary re-renders
- State duplication
- Prop drilling
Best Practices
- Keep state minimal
- Use local state when possible
- Avoid unnecessary updates
- Lift state only when needed
- Separate UI and business logic
Modern State Management
Large React applications use:
- Context API
- Redux
- Zustand
- React Query
AI Generated React Problems
AI-generated React code often creates:
- Too many states
- Duplicate logic
- Unnecessary re-renders
- Messy component structure
Developer Responsibility
- Optimize state management
- Keep components clean
- Reduce unnecessary renders
- Maintain scalable architecture
Quick Summary
- State stores dynamic data
- State updates automatically update UI
- useState is the basic React state hook
- React follows state-driven rendering
- Modern React apps heavily depend on state management
State-driven UI updates are one of the biggest reasons React is powerful for building modern interactive applications.