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
- increment state value on plus button click
- decrement state value on minus button click
- does not update ref value in DOM without re-render
- displays updated ref value after state re-render