#Heading 1 ##Heading 2 ###Heading 3 ####Heading 4 #####Heading 5 ######Heading 6
Paragraph
import { useCallback, useEffect, useState } from "react"; | |
type FetchState<T> = { | |
data: T | null; | |
isLoading: boolean; | |
error: Error | null; | |
isCached: boolean; | |
refetch: () => void; | |
}; |
:root { | |
--linear-in: linear(0, 1); | |
--linear-out: linear(0, 1); | |
--linear-in-out: linear(0, 1); | |
--power0-in: linear(0, 1); | |
--power0-out: linear(0, 1); | |
--power0-in-out: linear(0, 1); | |
--quad-in: linear( 0, 0.0039, 0.0156, 0.0352, 0.0625, 0.0977, 0.1407, 0.1914, 0.2499, 0.3164, 0.3906 62.5%, 0.5625, 0.7656, 1 ); | |
--quad-out: linear( 0, 0.2342, 0.4374, 0.6093 37.49%, 0.6835, 0.7499, 0.8086, 0.8593, 0.9023, 0.9375, 0.9648, 0.9844, 0.9961, 1 ); | |
--quad-in-out: linear( 0, 0.0027, 0.0106 7.29%, 0.0425, 0.0957, 0.1701 29.16%, 0.2477, 0.3401 41.23%, 0.5982 55.18%, 0.7044 61.56%, 0.7987, 0.875 75%, 0.9297, 0.9687, 0.9922, 1 ); |
// zod schema | |
z.object({ | |
// valid if string or: | |
optional: z.string().optional(), // field not provided, or explicitly `undefined` | |
nullable: z.string().nullable(), // field explicitly `null` | |
nullish: z.string().nullish(), // field not provided, explicitly `null`, or explicitly `undefined` | |
}); | |
// type | |
{ |
import z from "zod"; | |
export async function safeFetch<T>( | |
schema: z.Schema<T>, | |
input: RequestInfo, | |
init?: RequestInit | |
): Promise<T> { | |
const response = await fetch(input, init); | |
if (!response.ok) { |
import type {SanityClient} from '@sanity/client' | |
import {v5 as uuidv5} from 'uuid' | |
import {buildCollectionDocumentId, commitCollectionDocument} from './sanityOps' | |
import type {ShopifyDocumentCollection} from './storageTypes' | |
import {SHOPIFY_COLLECTION_DOCUMENT_TYPE, UUID_NAMESPACE_COLLECTIONS} from './constants' | |
import {DataSinkCollection} from './requestTypes' | |
import {idFromGid} from './requestHelpers' |
#Heading 1 ##Heading 2 ###Heading 3 ####Heading 4 #####Heading 5 ######Heading 6
Paragraph
// One of my new favorite React Hook patternms is to create handler | |
// functions for a custom hook using `React.useMemo` instead of | |
// `React.useCallback`, like so: | |
function useBool(initialState = false) { | |
const [state, setState] = React.useState(initialState) | |
// Instead of individual React.useCallbacks gathered into an object | |
// Let's memoize the whole object. Then, we can destructure the | |
// methods we need in our consuming component. |
React => measuring a DOM node
Your first instinct will be to use a useRef
which can be a good solution, although an object ref doesn’t notify us about changes to the current ref value. This means when the ref.current
changes you will not see the updated value.
Use a callback ref (this example is taken from the react hooks FAQ) This is a super simple and pretty nice solution for one-off measurements.