sebinsua

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?

---

sebinsua

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;

sebinsua

// 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.

sebinsua

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;

sebinsua

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

sebinsua

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

sebinsua

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

sebinsua

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) {

sebinsua

import { useState } from "react";

import "./styles.css";

function createGrid(n = 3) {
  return Array(n)
    .fill(() => Array(n).fill(null))
    .map((createRow) => createRow());
}

sebinsua

import {
  useCallback,
  useEffect,
  useMemo,
  useReducer,
  useRef,
  useState
} from "react";
import { createPortal } from "react-dom";