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 Zipped<A extends readonly (readonly any[])[]> = { | |
[RowIndex in keyof A[0]]: RowIndex extends "length" ? number : { | |
[ArrayIndex in keyof A]: A[ArrayIndex] extends readonly any[] ? A[ArrayIndex][RowIndex] : never; | |
}; | |
}; | |
type NumericRange<TotalLength extends number, TempRange extends any[] = []> = | |
TempRange['length'] extends TotalLength ? TempRange : NumericRange<TotalLength, [...TempRange, TempRange['length']]>; | |
type TupleFromKeys<T, K extends readonly (keyof T)[]> = { |
type Constructor<T> = new (...args: any[]) => T; | |
type DefaultType<T> = T extends Constructor<infer U> ? U : T; | |
function defaultObject<V, K extends string | symbol = string | symbol>(Type: Constructor<V> | V): Record<K, DefaultType<V>> & Iterable<[K, DefaultType<V>]> { | |
const store = new Map<K, DefaultType<V>>(); | |
const iterable = { | |
*[Symbol.iterator] () { | |
for (let [key, value] of store) { | |
yield [key, value]; |
from typing import List, Tuple | |
from collections import defaultdict, deque | |
def next_moves(stones: List[int], stone: int, previous_jump: int) -> List[Tuple[int, int]]: | |
return [ | |
(stone + next_jump, next_jump) | |
for next_jump in [previous_jump-1, previous_jump, previous_jump+1] | |
if next_jump > 0 and stone + next_jump in stones | |
] |
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]; | |
} |
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>; |