what the cache?!
React components are synchronous, long-lived and can sometimes re-render very frequently.
How do React components written in a sychronous programming style read values from remote resources only available asynchronously?
type _Tuple< | |
T, | |
N extends number, | |
R extends readonly T[] = [] | |
> = R["length"] extends N ? R : _Tuple<T, N, readonly [T, ...R]>; | |
type Tuple<T, N extends number> = _Tuple<T, N> & { | |
readonly length: N; | |
[I: number]: T; | |
[Symbol.iterator]: () => IterableIterator<T>; |
function layer(N) { | |
return Math.ceil(Math.sqrt(N)); | |
} | |
function layerRange(L) { | |
const start = Math.pow(L - 1, 2) + 1; | |
const end = Math.pow(L, 2); | |
return [start, end]; | |
} |
React components are synchronous, long-lived and can sometimes re-render very frequently.
How do React components written in a sychronous programming style read values from remote resources only available asynchronously?
import { useCallback, useState } from "react"; | |
import "./styles.css"; | |
const EMPTY = false; | |
const MINE = true; | |
const MINE_LIKELIHOOD_THRESHOLD = 0.9; | |
interface Cell { | |
mine: boolean; | |
excavated: boolean; |
function letterFrequency(str) { | |
const uniques = {}; | |
for (let char of str) { | |
uniques[char] = uniques[char] ? ++uniques[char] : 1; | |
} | |
return uniques; | |
} | |
function letterFrequencyTemplate(uniques) { |
// Replace items in `as` with a matching `id` with the | |
// respective item in `bs`, otherwise append new items. | |
const abs = Object.fromEntries([ | |
...as.map(a => [a.id, a]), | |
...bs.map(b => [b.id, b]) | |
]); | |
// The 'trick' is that if you have two entries with the same id | |
// (in this case, implying that the value was updated within `bs`) | |
// then with this method the value of the right-most entry will be used. |
function* getOddPalindromesOutwardsFromCentre(str, index) { | |
let left = index - 1; | |
let right = index + 1; | |
let current = str[index]; | |
yield current; | |
while (left >= 0 && right < str.length && str[left] === str[right]) { | |
current = `${str[left]}${current}${str[right]}`; | |
yield current; |
type CreateArray<V extends number, Arr extends unknown[] = []> = | |
Arr extends { length: V } ? Arr: CreateArray<V, [...Arr, 1]>; | |
type Add<A extends number, B extends number> = [...CreateArray<A>, ...CreateArray<B>]['length']; | |
type V = Add<2, 3>; | |
type Sub<A extends number, B extends number> = CreateArray<A> extends [...CreateArray<B>, ...infer Els] ? Els['length'] : never; | |
type V2 = Sub<10, 1>; |
import DeepProxy from 'proxy-deep'; | |
export function withDeepPropertyAccessEmitter<T extends object>( | |
object: T, | |
emit: (info: { | |
path: (string | symbol)[]; | |
target: T; | |
// eslint-disable-next-line @typescript-eslint/no-explicit-any | |
value: any; | |
}) => void |
function* unroll(matrix) { | |
const height = matrix.length; | |
const width = matrix[0].length; | |
for (let y = 0; y < height; y++) { | |
for (let x = 0; x < width; x++) { | |
yield { y, x }; | |
} | |
} | |
} |