State in React is a built-in object that is used to store and manage data that changes over time in a component.
When state changes, the component re-renders, and the UI is updated to reflect the new state.
Contents
Key Properties of State in React:
Property | Description |
---|---|
Mutable | State is changeable using state setter functions like setState() or useState() . |
Component-specific | Each component has its own state. Changing state in one component does not affect other components, unless passed as props . |
Triggers Re-render | When state updates, React re-renders the component to reflect the updated state in the UI. |
Asynchronous Updates | State updates can be asynchronous. React may batch multiple state updates for performance optimization. |
Initial Value | State can have an initial value when declared. |
Using State in Class Component:
javascriptCopyEditimport React, { Component } from 'react';
class Counter extends Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
incrementCount = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.incrementCount}>Increment</button>
</div>
);
}
}
Using State in Function Component (with Hooks):
javascriptCopyEditimport { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const incrementCount = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={incrementCount}>Increment</button>
</div>
);
}
Explanation:
useState(0)
→ Initializes state with0
.count
→ Current state value.setCount()
→ Updates the state and triggers a re-render.
Key Points to Remember:
Concept | Explanation |
---|---|
Initial State | Set default state in constructor (Class) or useState() (Function). |
State Update | Use this.setState() in Class Components or setState() from useState() in Function Components. |
Re-rendering | State change → Re-render component. |
Immutable | Never modify state directly → Use setState() or state setters. |
Asynchronous Nature | State updates may be asynchronous, so use callbacks if relying on the previous state. |
Example of using callback with state update:
javascriptCopyEditsetCount(prevCount => prevCount + 1);
Difference Between Props and State:
Aspect | Props | State |
---|---|---|
Definition | Data passed from parent to child component. | Data managed within the component itself. |
Mutable? | Immutable (read-only). | Mutable (changeable using setState() or useState() ). |
Triggers Re-render? | Yes, when props change. | Yes, when state changes. |
Controlled By | Parent component. | Component itself. |
Key Takeaways:
- State stores dynamic data that influences a component’s output.
- When state changes, React automatically re-renders the component.
- Use
useState()
in Function Components andthis.setState()
in Class Components. - State is private and fully controlled by the component.
Let me know if you need more help with React state or any other concept! 🚀😊