Pete Murphy pete-murphy

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

Monads and delimited control are very closely related, so it isn’t too hard to understand them in terms of one another. From a monadic point of view, the big idea is that if you have the computation m >>= f, then f is m’s continuation. It’s the function that is called with m’s result to continue execution after m returns.

If you have a long chain of binds, the continuation is just the composition of all of them. So, for example, if you have

m >>= f >>= g >>= h

then the continuation of m is f >=> g >=> h. Likewise, the continuation of m >>= f is g >=> h.

PureScript

What is it?

Compiles to JavaScript
Haskell-inspired type system (with some improvements!)
No runtime (unlike Elm, GHCJS, etc)
A focus on readable and debuggable JavaScript

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

	-- monadstate-example.hs
	--
	-- Load this program in GHCi:
	--
	-- stack repl \
	-- --resolver nightly \
	-- --package transformers \
	-- --package mtl \
	-- monadstate-example.hs
	--

	-- https://haskell-explained.gitlab.io/blog/posts/2019/07/28/polysemy-is-cool-part-1/

	module PasswordManager where

	import Prelude
	import Data.Map (Map)
	import Data.Map as M
	import Data.Maybe (Maybe(..))
	import Data.Tuple (Tuple(..))
	import Node.Crypto.Hash (Algorithm(..), base64)

	-- in response to https://www.reddit.com/r/haskell/comments/e3mm0k/options_for_interactive_haskell/

	-- gloss can be used to interactively define animations, but you have to jump
	-- through a number of hoops. Usually, interactively defining haskell programs
	-- is easy: run @ghcid --test=main@ in a different terminal, and it will
	-- re-compile and re-run (if there are no parse/type errors) your program
	-- everytime you save the source file. Unfortunately, ghci and ghcid run their
	-- expressions in a separate thread, but on some platforms such as macOS, gloss
	-- can only run from the main thread! So we have to write a simple variant of
	-- ghcid which runs gloss on the main thread and only reloads the portion of the

	import { head as headArr, reverse, snoc as snocArr, tail as tailArr } from "fp-ts/lib/Array";
	import {
	applyFlipped,
	compose,
	constant,
	Curried2,
	Curried3,
	curry,
	Endomorphism,
	flip,

	name: Booking
	version: 0.1.0.0
	synopsis: Handling a reservation request in Haskell. Proof of concept
	description: Please see README.md
	homepage: https://gist.github.com/ploeh/c999e2ae2248bd44d775
	license: MIT
	license-file: LICENSE
	author: Mark Seemann
	maintainer: [email protected]
	copyright: 2016 Mark Seemann

	module ApiModel where

	import Data.Time (ZonedTime(..), parseTimeM, defaultTimeLocale, iso8601DateFormat)

	data ReservationRendition = ReservationRendition
	{ rDate :: String
	, rName :: String
	, rEmail :: String
	, rQuantity :: Int }
	deriving (Eq, Show, Read)