Overview

Learn the difference between useState and useRef by creating two counters and observing how state and refs affect component rendering.

Requirements

• Create two counters: counter state and counter ref, each with increment and decrement buttons.
• The counter state should update and reflect its value in the UI when incremented or decremented.
• The counter ref should update its value when incremented or decremented without triggering a UI update.
• After triggering a rerender with the counter state, the counter ref should show its updated value.

Notes

• Understand the difference between useState and useRef in React.
• Learn how useRef can store mutable values without causing rerenders.
• Practice triggering and observing rerenders with useState.
• Gain clarity on when to use useState vs useRef depending on UI updates.

Tests

1. increment state value on plus button click
2. decrement state value on minus button click
3. does not update ref value in DOM without re-render
4. displays updated ref value after state re-render