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?
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; |
// 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 _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>; |
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>; |
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 }; | |
} | |
} | |
} |
function createGenerator(maybeIterable) { | |
const isGenerator = (maybeGenerator) => | |
"next" in maybeGenerator && | |
typeof maybeGenerator["next"] === "function" && | |
"throw" in maybeGenerator && | |
typeof maybeGenerator["throw"] === "function" && | |
"return" in maybeGenerator && | |
typeof maybeGenerator["return"] === "function"; | |
function* generatorFrom(maybeIterable) { |
import { useState } from "react"; | |
import "./styles.css"; | |
function createGrid(n = 3) { | |
return Array(n) | |
.fill(() => Array(n).fill(null)) | |
.map((createRow) => createRow()); | |
} |