10 posts tagged with "react"

The title of this post might seem ridiculous. Of course useState and useMemo are different.

But in one sense, they are quite similar.

Consider this example:

const [state] = useState(() => {
	return calculateSomething(input)
})

const memo = useMemo(() => {
	return calculateSomething(input)
}, [input])

I want to take you with me on a journey of creating a table component that is generic and statically typed. Instead of just showing an end result, I want to try out different approaches that have different pitfalls, and find the solution that seems to be the best one.

As a starting point, we want to render a table with some country data:

A few weeks ago, I wrote a blog post on how to turn an API call into a hook to make it easy to use. By then, I hadn't used TanStack Query (formerly React Query) yet. Turns out lots of cool stuff comes for free when using it. Let me show you.

In my last post IP Location, I used an API to get the location of a user's IP address.

In this post, I want to show how to make it a hook, so a user's IP location can be used in an easy way anywhere in your application.

Some time ago I wrote a blog post on how to access the clipboard with the navigator API. I decided to make it a custom hook to make it super easy to use. Before we go into code, let's try it out — click the button to read your clipboard:

How many decimals of pi do you know? Here you can test yourself and try to improve. Click the box below and type the first decimal to begin. If you want help, you can click the "Show answer" button, where you'll also see how far you've come — the correctly typed decimals have a green background.

It's Friday disco time!

TL;DR​

• A grid of cells each get a random rgb(...) color, and the useInterval custom hook reassigns every color on each beat.
• The frequency in hertz maps to the interval delay as 1000 / frequency; dropping below 1 Hz passes null and pauses the disco.
• The CSS grid layout and each cell's color are set with inline styles, which suit values that change on every render better than CSS classes.

setInterval runs a callback at a fixed cadence. Using it in React means remembering to call clearInterval on unmount, and reaching for extra state any time the interval should pause or restart. This post wraps both concerns in a small custom hook called useInterval.

TL;DR​

• useEffect starts the interval and returns a cleanup that calls clearInterval — no manual unmount handling.
• The latest callback is kept in a ref, so the interval keeps ticking at a steady rate even when the component re-renders for unrelated reasons.
• Passing null as the delay pauses the interval, so you can derive "running" straight from props or state instead of tracking it separately.
• Changing the delay restarts the interval automatically, so a dynamic value "just works".

Have you ever copied something and immediately forgotten what it was?

TL;DR​

• navigator.clipboard.readText() returns a Promise<string> with the current clipboard text.
• It is only available in a secure context (HTTPS or localhost), and the read has to happen during a user activation — that's why it's wired up to a button click rather than running on mount.
• The call can reject (permission denied, document not focused, no clipboard support, …), so it always belongs in a try/catch.

Start the game by clicking the box and typing the letter shown. The clock starts and you get a new random letter to type as fast as you can. Each correct letter is followed by a new random letter, and if you type the wrong letter, the game ends. Go for it!

TL;DR​

• A small typing game built in React with TypeScript.
• useReducer keeps the game state in one place, with the current mode as idle or running.
• useEffect reads the saved high score from local storage and picks the first random letter on mount.
• A custom useInterval hook drives the running clock.