State Management Overview in React

Implement a Toggle Button

Create a React component that toggles between 'ON' and 'OFF' states using useState.

Expected output: A button that displays 'ON' or 'OFF' and toggles text when clicked.

Hint: Use a boolean state variable and toggle its value on button click.

Lift State Up

Build two sibling components that share a counter value by lifting state up to their parent.

Expected output: Both components display the same counter and can increment it.

Hint: Manage the counter state in the parent and pass it down as props.

Props are immutable data passed from parent to child components, while state is mutable data managed within a component that can change over time.

useReducer is preferred when state logic is complex or when the next state depends on the previous state, allowing centralized and predictable state updates.

When state updates via setter functions, React schedules a re-render of the component to update the UI to reflect the new state.