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>; |