Replymessage unavailable
ohn", }); The spread operator copies the existing object while updating only the required property. Updating Arrays in State Similarly, avoid mutating arrays.
Incorrect: tasks.push("Learn React"); Correct: setTasks([ ...tasks, "Learn React", ]); Creating a new array ensures React detects the change. Multiple State Variables A component can manage multiple pieces of state. const [name, setName] = useState(""); const [email, setEmail] = useState(""); const [age, setAge] = useState(0); Each state variable is independent.
This makes components easier to reason about. A Real-World Example Imagine a banking dashboard. Account Balance
₹25,000 After transferring money: Account Balance
₹18,000 The balance displayed on the screen changes because the component's state has been updated.
React automatically re-renders only the affected parts of the UI. Common Mistakes Directly Modifying State ❌ count++; Always use the setter function. Mutating Objects or Arrays Avoid using methods like:
* push()
* pop()
* splice()
Instead, create new objects or arrays using the spread operator or other immutable methods. Too Much State Not every value belongs in state.
If a value can be derived from existing state or props, don't duplicate it.
Keeping state minimal reduces bugs and simplifies your code. State vs Props Props State Passed from parent Owned by component Read-only Can change External data Internal data Cannot be modified by child Updated using setter functions
Understanding the distinction between props and state is essential for building predictable React applications. Best Practices * Keep state as small as possible.
* Never mutate state directly.
* Use functional updates when the next value depends on the previous one.
* Store only what truly needs to change.
* Split unrelated pieces of state into separate variables.
These practices lead to cleaner, more maintainable components. Key Takeaways Today, we learned:
✅ State stores data that changes over time.
✅ Functional components use the useState Hook to manage state.
✅ Updating state triggers a re-render.
✅ State can store any JavaScript value.
✅ Objects and arrays should be updated immutably.
✅ Understanding the difference between props and state is fundamental to React. Coming Next 🚀 In Day 8, we'll explore one of React's most powerful concepts: Component Rendering Lifecycle & Re-rendering We'll answer questions like:
* What happens when a React component renders?
* What triggers a re-render?
* When does React skip rendering?
* What is the rendering lifecycle in functional components?
* How does React decide what to update?
Understanding the rendering process is the foundation for learning performance optimization techniques such as React.memo, useMemo, and useCallback later in this series.
Happy Coding! 🚀