Andrei Xavier de Oliveira Calazans AndreiCalazans

If you use server rendering, keep in mind that neither useLayoutEffect nor useEffect can run until the JavaScript is downloaded.

You might see a warning if you try to useLayoutEffect on the server. Here's two common ways to fix it.

Option 1: Convert to useEffect

If this effect isn't important for first render (i.e. if the UI still looks valid before it runs), then useEffect instead.

function MyComponent() {

2019 update: this essay has been updated on my personal site, together with a followup on how to get started

2020 update: I'm now writing a book with updated versions of all these essays and 35 other chapters!!!!

1. Learn in public

If there's a golden rule, it's this one, so I put it first. All the other rules are more or less elaborations of this rule #1.

You already know that you will never be done learning. But most people "learn in private", and lurk. They consume content without creating any themselves. Again, that's fine, but we're here to talk about being in the top quintile. What you do here is to have a habit of creating learning exhaust. Write blogs and tutorials and cheatsheets. Speak at meetups and conferences. Ask and answer things on Stackoverflow or Reddit. (Avoid the walled gardens like Slack and Discourse, they're not public). Make Youtube videos

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.

Unfortunately, homebrew does not support --with-universal-ctags option for global (on the state of April 2018) The reason is that universal-ctags is not officially released yet.

Install universal ctags

Run brew install --HEAD universal-ctags/universal-ctags/universal-ctags (See https://github.com/universal-ctags/homebrew-universal-ctags repo)

If you're on macOS, you might have an old ctags installed with command line tools for XCode. To fix this, simply run alias ctags="brew --prefix/bin/ctags"

	import { useEffect, useRef } from 'react';

	export const useEventEmitter = (eventEmitter, eventName: string, fn: () => void) => {
	const subscription = useRef(null);

	useEffect(() => {
	subscription.current = eventEmitter.addListener(eventName, fn);

	return () => {
	if (subscription.current) {

	// Example of what data masking gets us with Relay

	const AdminList = createFragmentContainer(
	(props) => <div>
	{props.admins.map((admin) => <div>{admin.name}</div>)}
	</div>,
	{
	admins: graphql`
	fragment AdminList_admins on User @relay(plural: true) {
	name

	const {
	isFetchingEnd,
	isFetchingTop,
	onRefresh,
	onEndReached,
	} = useRelayPagination(relay, users);

	const isRefreshing = isFetchingEnd \|\| isFetchingTop;

	<FlatList

	const path = require('path');

	const getWorkspaces = require('get-yarn-workspaces');
	const blacklist = require('metro-config/src/defaults/blacklist');

	const workspaces = getWorkspaces(__dirname);

	module.exports = {
	projectRoot: path.resolve(__dirname, 'packages/app'),


	function Timer() {
	const startTime = React.useRef(performance.now());
	const [time, setTime] = React.useState(performance.now());
	React.useEffect(() => {
	const id = setTimeout(() => {
	ReactDOM.flushSync(() => {
	setTime(performance.now());
	});
	}, 2);

	with import <nixpkgs> {};

	let
	jdk = openjdk;
	node = nodejs-10_x;
	sdk = androidenv.androidsdk {
	platformVersions = [ "23" ];
	abiVersions = [ "x86" ];
	useGoogleAPIs = true;
	useExtraSupportLibs = false;