Clément Paris ClementParis016

Advanced memoization and effects in React

Memoization is a somewhat fraught topic in the React world, meaning that it's easy to go wrong with it, for example, by [making memo() do nothing][memo-pitfall] by passing in children to a component. The general advice is to avoid memoization until the profiler tells you to optimize, but not all use cases are general, and even in the general use case you can find tricky nuances.

Discussing this topic requires some groundwork about the technical terms, and I'm placing these in once place so that it's easy to skim and skip over:

Memoization means caching the output based on the input; in the case of functions, it means caching the return value based on the arguments.
Values and references are unfortunately overloaded terms that can refer to the low-level implementation details of assignments in a language like C++, for example, or to memory

Note:

When this guide is more complete, the plan is to move it into Prepack documentation.
For now I put it out as a gist to gather initial feedback.

A Gentle Introduction to Prepack (Part 1)

If you're building JavaScript apps, you might already be familiar with some tools that compile JavaScript code to equivalent JavaScript code:

Babel lets you use newer JavaScript language features, and outputs equivalent code that targets older JavaScript engines.

(also know as lies and/or alternative facts)

js

setImmediate - doesn't set anything immediately, waits for a tick before executing
setTimeout(fn, n) - never sets the timeout to exactly n
Math.random() - computers cannot generate random numbers
Promise - is a lie when rejected
Array.reduce - accumulates, does not reduce (via @sbmadhav)

[based on a true story]

So. Your friend's about to teach you how to make a website. Great!

You make a file, and you save it as 'index.html'. Why it's called 'index' isn't really explained to you, but whatever.

You type the following.

hello world

	/*
	Copy this into the console of any web page that is interactive and doesn't
	do hard reloads. You will hear your DOM changes as different pitches of
	audio.

	I have found this interesting for debugging, but also fun to hear web pages
	render like UIs do in movies.
	*/

	const audioCtx = new (window.AudioContext \|\| window.webkitAudioContext)()

	(function (context, trackingId, options) {
	const history = context.history;
	const doc = document;
	const nav = navigator \|\| {};
	const storage = localStorage;
	const encode = encodeURIComponent;
	const pushState = history.pushState;
	const typeException = 'exception';
	const generateId = () => Math.random().toString(36);
	const getId = () => {

	@mixin lhCrop($line-height) {
	&::before {
	content: '';
	display: block;
	height: 0;
	width: 0;
	margin-top: calc((1 - #{$line-height}) * 0.5em);
	}
	}

	function withAuthentication(WrappedComponent) {
	const ModifiedComponent = (props) => {
	if (!props.isAuthenticated) {
	return <Redirect to="/login" />;
	}

	return (<WrappedComponent { ...props } />);
	};

	const mapStateToProps = (state) => ({

	import React from 'react';
	import ReactDOM from 'react-dom';
	import { Provider } from 'react-redux';
	import store from './store';

	const rootEl = document.getElementById('root');

	// Create a reusable render method that we can call more than once
	let render = () => {
	// Dynamically import our main App component, and render it

	/* the page should not change width as content is loaded */
	body {
	overflow-y: scroll;
	}

	/* block scrolling without losing the scroll bar and shifting the page */
	/* add this class when a modal is open */
	body.block-scroll {
	overflow: hidden;
	overflow-y: scroll !important;