React State: Updating State in React Components

Implement a Counter with State Updates

Create a React functional component that displays a count and a button to increment the count using useState and functional updates.

Expected output: A counter that increments the displayed number each time the button is clicked.

Hint: Use the updater function form of setState to increment the count.

Convert Class Component to Functional Component

Convert a given React class component that uses setState to a functional component using useState.

Expected output: A functional component with equivalent state update behavior.

Hint: Replace this.state and this.setState with useState hook and updater function.

In a React class component, you update state using the setState method, which can accept an object or a function to update the state asynchronously.

Functional updates ensure you get the latest state value when the new state depends on the previous state, preventing bugs caused by stale state.

Mutating state directly can lead to unpredictable UI behavior because React relies on state immutability to detect changes and trigger re-renders.