10 inlägg taggade med "react"

Titeln på det här inlägget kan verka löjlig. Självklart är useState och useMemo olika.

Men i ett avseende är de ganska lika.

Betrakta det här exemplet:

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

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

Jag vill ta med dig på en resa där vi skapar en tabellkomponent som är generisk och statiskt typad. I stället för att bara visa ett slutresultat vill jag testa olika tillvägagångssätt som har olika fallgropar och hitta den lösning som verkar bäst.

Som utgångspunkt vill vi rendera en tabell med några landdata:

För några veckor sedan skrev jag ett blogginlägg om att göra en API-fråga till en hook för att förenkla användningen. Då hade jag inte använt TanStack Query (tidigare React Query) än. Det visade sig att mycket kommer gratis med TanStack Query. Låt mig visa.

I mitt senaste inlägg IP-baserad plats testade jag ett API som hämtar en användares IP-adressplats.

I det här inlägget beskriver jag hur jag gör det till en hook, så att IP-adressplatsen kan användas enkelt var som helst i en applikation.

För ett tag sedan skrev jag ett blogginlägg om hur man får tillgång till clipboarden med navigator-API:t. Jag bestämde mig för att göra det till en custom hook för att det skulle bli superlätt att använda. Innan vi går in i koden – klicka på knappen för att läsa din clipboard:

Hur många decimaler av pi kan du? Här kan du testa dig och försöka bli bättre! Klicka på rutan nedan och skriv första decimalen för att börja. Om du vill ha hjälp kan du klicka på "Visa facit"-knappen där du även ser hur långt du har kommit genom att de korrekt angivna decimalerna har grön bakgrund.

Nu blir det fredagsdisco!

TL;DR​

• Varje ruta i en grid får en slumpmässig rgb(...)-färg, och custom-hooken useInterval sätter om alla färger vid varje takt.
• Frekvensen i hertz översätts till intervallets delay som 1000 / frequency; under 1 Hz skickas null in och discot pausas.
• CSS grid-layouten och varje rutas färg sätts med inline-stilar, som passar värden som ändras vid varje rendering bättre än CSS-klasser.

setInterval kör en callback i ett bestämt intervall. Att använda funktionen i React innebär att man måste komma ihåg att anropa clearInterval vid unmount och dra in extra state varje gång intervallet ska pausas eller startas om. Det här inlägget paketerar båda delarna i en liten custom hook som jag kallar useInterval.

TL;DR​

• useEffect startar intervallet och returnerar en cleanup som anropar clearInterval – ingen manuell unmount-hantering.
• Den senaste callbacken hålls i en ref, så intervallet fortsätter ticka i jämn takt även när komponenten renderar om av orelaterade skäl.
• Att skicka in null som delay pausar intervallet, så det går att härleda "körs nu" direkt från props eller state utan en separat flagga.
• När delay ändras startas intervallet om automatiskt, så ett dynamiskt värde "bara funkar".

Har du någonsin kopierat något och direkt glömt vad det var?

TL;DR​

• navigator.clipboard.readText() returnerar ett Promise<string> med clipboardens nuvarande text.
• Funktionen är bara tillgänglig i en säker kontext (HTTPS eller localhost), och läsningen måste ske under en användarinteraktion – därför är den kopplad till ett knappklick i stället för att köras vid sidladdning.
• Anropet kan kasta fel (nekad behörighet, dokumentet saknar fokus, ingen clipboard tillgänglig …) så det hör alltid hemma i ett try/catch.

Starta spelet genom att klicka på rutan och skriva bokstaven som visas. Då börjar tiden gå och du får en ny slumpmässig bokstav att skriva så snabbt som möjligt. Varje rätt följs av en ny slumpmässig bokstav och om du skriver fel tar spelet slut. Kör hårt!

TL;DR​

• Ett litet snabbskrivningsspel byggt i React med TypeScript.
• useReducer håller spelets state samlat, med läget som idle eller running.
• useEffect läser in sparat rekord från local storage och slumpar fram första bokstaven vid mount.
• En egen useInterval-hook driver klockan.