# Counter Component

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

- Difficulty: beginner
- Tags: useState, useRef
- Estimated time: 15 minutes
- Tests: 4
- Requires subscription: no

## 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

01. increment state value on plus button click
02. decrement state value on minus button click
03. does not update ref value in DOM without re-render
04. displays updated ref value after state re-render