Damian Pieczynski piecyk

⚠️ Warning: this document is out of date.

For the most recent webpack5 instructions see MIGRATION.md.

Storybook experimental Webpack 5 support

Storybook 6.2 includes experimental Webpack 5 support. Webpack 5 brings a variety of performance improvements, as well as exciting new features like module federation. Here's a quick guide to get you going.

Intro

Why using the `children` prop makes `React.memo()` not work

I've recently ran into a pitfall of [React.memo()][memo] that seems generally overlooked; skimming over the top results in Google just finds it mentioned in passing in a [React issue][regit], but not in the [FAQ] or API [overview][react-api], and not in the articles that set out to explain React.memo() (at least the ones I looked at). The issue is specifically that nesting children defeats memoization, unless the children are just plain text. To give a simplified code example:

const Memoized = React.memo(({ children }) => (<div>{children}</div>));
// Won't ever re-render
<Memoized>bar</Memoized>
// Will re-render every time; the memoization does nothing


	// when T is any\|unknown, Y is returned, otherwise N
	type IsAnyUnknown<T, Y, N> = unknown extends T ? Y : N;

	// when T is never, Y is returned, otherwise N
	type IsNever<T, Y = true, N = false> = [T] extends [never] ? Y : N;

	// when T is a tuple, Y is returned, otherwise N
	// valid tuples = [string], [string, boolean],
	// invalid tuples = [], string[], (string \| number)[]

	/** Used by Flavor to mark a type in a readable way. */
	export interface Flavoring<FlavorT> {
	_type?: FlavorT;
	}
	/** Create a "flavored" version of a type. TypeScript will disallow mixing flavors, but will allow unflavored values of that type to be passed in where a flavored version is expected. This is a less restrictive form of branding. */
	export type Flavor<T, FlavorT> = T & Flavoring<FlavorT>;

	/** Used by Brand to mark a type in a readable way. */
	export interface Branding<BrandT> {
	_type: BrandT;

	#!/usr/bin/python
	# coding=utf-8
	# "DATASHEET": http://cl.ly/ekot
	from __future__ import print_function
	import serial, struct, sys, time

	DEBUG = 1
	CMD_MODE = 2
	CMD_QUERY_DATA = 4
	CMD_DEVICE_ID = 5

	/* bling.js */
	window.$ = document.querySelector.bind(document);
	window.$$ = document.querySelectorAll.bind(document);
	Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
	NodeList.prototype.__proto__ = Array.prototype;
	NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };

	// You can have multiple optional arguments, but only if the arguments
	// can be distinguished from one another (in this example, by type)

	function optionalUnambiguous(myString, myNumber) {
	if (typeof myString === 'number') {
	myNumber = myString;
	myString = null;
	}
	if (myString == null) { myString = 'default'; }
	if (myNumber == null) { myNumber = 0; }

	var gulp = require('gulp');
	var browserify = require('browserify');
	var notify = require('gulp-notify');
	var source = require('vinyl-source-stream');
	var watchify = require('watchify');
	var plumber = require('gulp-plumber');
	var less = require('gulp-less');
	var csso = require('gulp-csso');
	var watch = require('gulp-watch');
	var envify = require('envify');



	;; Turn off mouse interface early in startup to avoid momentary display
	(if (fboundp 'menu-bar-mode) (menu-bar-mode -1))
	(if (fboundp 'tool-bar-mode) (tool-bar-mode -1))
	(if (fboundp 'scroll-bar-mode) (scroll-bar-mode -1))

	;; No splash screen please ... jeez
	(setq inhibit-startup-message t)
	(mouse-wheel-mode t)

Damian Pieczynski piecyk

Storybook experimental Webpack 5 support

Intro

Why using the children prop makes React.memo() not work

Why using the `children` prop makes `React.memo()` not work