Q1. What is state in React?
State is an object that holds data that may change over time within a component.
It is managed internally by the component and can be updated using setState (in classes) or the useState hook (in functional components).
When state changes, the component re-renders to reflect the new data.
It is managed internally by the component and can be updated using setState (in classes) or the useState hook (in functional components).
When state changes, the component re-renders to reflect the new data.
Q2. How do you initialize state in a functional component?
Using the useState hook:
The initialValue can be a primitive, object, or array.
Example:
The setState function is used to update the state and trigger re-render.
const [state, setState] = useState(initialValue);The initialValue can be a primitive, object, or array.
Example:
const [count, setCount] = useState(0);The setState function is used to update the state and trigger re-render.
Q3. How do you update state in a class component?
In class components, you use
It merges the new state with the existing state.
Example:
setState can also accept a function for updates based on previous state.
It is asynchronous, so multiple calls may be batched.
this.setState() method.It merges the new state with the existing state.
Example:
this.setState({ count: this.state.count + 1 });setState can also accept a function for updates based on previous state.
It is asynchronous, so multiple calls may be batched.
Q4. What is the difference between state and props?
Props are read-only and passed from parent to child, while state is internal and mutable.
Props are used to configure a component, while state manages data that changes over time.
Changes in props are triggered by parent re-renders, while state changes are triggered within the component.
Props are used to configure a component, while state manages data that changes over time.
Changes in props are triggered by parent re-renders, while state changes are triggered within the component.
Q5. Can you directly modify state?
No, you should never modify state directly (e.g.,
Always use setState or the state setter function from useState.
Direct mutation bypasses React's re-rendering mechanism and can lead to inconsistencies.
this.state.count = 5).Always use setState or the state setter function from useState.
Direct mutation bypasses React's re-rendering mechanism and can lead to inconsistencies.