SMALL EXAMPLES. USEFUL BUILDING BLOCKS.

React Hooks.

Five simple, interactive examples from my time learning React. Click, change, and experiment to see what each hook does.

EXPERIMENT 01

useState()

A small change, a fresh render. Update a counter and watch React keep the interface in sync.

Press the button to increment the Counter:0

EXPERIMENT 02

useEffect()

Connect state to something outside React. This counter saves its value in your browser for your next visit.

This counter will save to local storage using useEffect:0

EXPERIMENT 03

useMemo()

Reuse a calculated result. Compare adding a square with updating a number that deliberately triggers an expensive calculation.

Adding squares should be quick, updating number will be slow. 0

EXPERIMENT 04

useRef()

Keep a reference between renders. Try changing the colour blocks, then save and reuse a text value.

This demo has 2 parts, the first is that the squares have useRef to store their random colors when the button is pressed, the 2nd demo has a useRef to persist a value

Input Val: , Persisted Val:

EXPERIMENT 05

A custom hook

Package reusable logic into your own hook. This example fetches sample users and handles the loading and error states.

Press the button to use our Custom Fetching Hook