sebmarkbage

The Rules of React

All libraries have subtle rules that you have to follow for them to work well. Often these are implied and undocumented rules that you have to learn as you go. This is an attempt to document the rules of React renders. Ideally a type system could enforce it.

What Functions Are "Pure"?

A number of methods in React are assumed to be "pure".

On classes that's the constructor, getDerivedStateFromProps, shouldComponentUpdate and render.

bvaughn

Infinite lists and reflow

In my experience, infinite lists use two basic layout strategies. The first uses absolute positioning to control where visible items are rendered. The second uses relative positioning (with top/left padding to offset for unrendered items).

In both cases, the list abstraction caches some metadata about the size of items once they have been rendered– so that it knows where to position the items that come after them.

Both of these strategies need to handle reflow. For example, changing the width of a list often affects the height of its itesm. Generally speaking, only the "window" of rendered (visible) items are remeasured in this case (because it would be too slow to rerender and remeasure all of the items before). But once a user scrolls backwards (up/left)– the list needs to account for the reflowed sizes. If it didn't, items would appear to jump up or down (depending on the delta between the previous, cached sizes and the new/reflowed sizes).

How the list deals with new sizes

padolsey

Number.prototype.to = function*(n) {
  let finish = n.valueOf();
  let start = this.valueOf();
  let finishLessThan = start >= finish;
  for (
    let i = start;
    finishLessThan ? i >= finish: i <= finish;
    i += finishLessThan ? -1 : +1
  ) yield i;
};

ryanflorence

import React from "react";
import { Link } from "react-router-dom";

export function createResource(getPromise) {
  let cache = {};
  let inflight = {};
  let errors = {};

  function load(key) {
    inflight[key] = getPromise(key)

joshuabradley012

class State {
  constructor(display, actors) {
    this.display = display;
    this.actors = actors;
  }

  update(time) {

    /**
     * provide an update ID to let actors update other actors only once

csswizardry

/**
 * Tier 1 – Dotted
 */
* { outline: 2px dotted purple; }
* * { outline: 2px dotted blue; }
* * * { outline: 2px dotted green; }
* * * * { outline: 2px dotted yellow; }
* * * * * { outline: 2px dotted orange; }
* * * * * * { outline: 2px dotted red; }