Andrew Duthie aduth

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.

Anti-Patterns

too many rerenders, mostly because of inefficient selectors
computing something just to throw it away
initializing everything during Calypso boot

Be aware how Redux update cycle works

action dispatch calls reducer
reducer produces a new state (almost always)

REST API Contributor Day

Plan for the day

Improve documentation
- Something we explain very poorly in the REST API handbook; hoping to explain it today to de-mystify
- Handbook is what was on WP-API.org -- some stuff in there is very good and some that is out of date
- We have some guides but they are not organized
- We want to come up with a coherent content architecture
Expand the endpoints presented by the API

React lifecycle cheatsheet

Method	Side effects¹	State updates²	Example uses
Mounting
`componentWillMount`		✓	Constructor equivalent for `createClass`
`render`			Create and return element(s)
`componentDidMount`	✓	✓	DOM manipulations, network requests, etc.
Updating
`componentWillReceiveProps`		✓	Update `state` based on changed `props`

This demonstrates the implementation of full text search for documents in Indexed DB.

Word-breaking and stemming is used to create a list of terms for each document.
Document records are annotated with the list of terms when added to the database.
A multi-entry index on the list of terms is populated.
A query is similarly processed into a list of terms.
A join over the terms is implemented using multiple cursors on the index.

The necessity of annotating records with the word list to populate the index is a limitation of the current Indexed DB API. A feature request to support custom

There are two types of markup in Liquid: Output and Tag.

Output markup (which may resolve to text) is surrounded by

{{ matched pairs of curly brackets (ie, braces) }}

Tag markup (which cannot resolve to text) is surrounded by

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

	name: CI

	on: [push]

	jobs:
	tslint:
	runs-on: ubuntu-latest
	strategy:
	matrix:
	job: [0, 1, 2, 3, 4]

	import { h, Component } from 'preact';
	import Markup from 'preact-markup';
	import register from './preact-custom-element';

	// just a proxy component: WC -> Preact -> WC
	const A = () => <x-b foo="initial foo from <x-a>" />;

	// stateful component that can re-render
	class B extends Component {
	render(props, state) {

	#!/bin/bash
	set -e

	show_help() {
	cat << EOF
	Usage: ${0##*/} [-u USER] [-p PASS] [-P PORT] [-H HOST] [DATABASE]
	${0##*/} -h

	Open a standard connection in Sequel PRO.