罗坤 1uokun

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

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

	module.exports = function (api) {
	api.cache(true);
	return {
	presets: ['babel-preset-expo'],
	plugins: [
	["@babel/plugin-transform-flow-strip-types"],
	["@babel/plugin-proposal-decorators", { "legacy": true }],
	["@babel/plugin-proposal-class-properties", { "loose": true }],
	["module-resolver", {
	"alias": {

	import android.annotation.SuppressLint;
	import android.content.ContentUris;
	import android.content.Context;
	import android.database.Cursor;
	import android.net.Uri;
	import android.os.Build;
	import android.os.Environment;
	import android.provider.DocumentsContract;
	import android.provider.MediaStore;

	/**
	* Copyright 2013-present, Facebook, Inc.
	* All rights reserved.
	*
	* This source code is licensed under the BSD-style license found in the
	* LICENSE file in the root directory of this source tree. An additional grant
	* of patent rights can be found in the PATENTS file in the same directory.
	*
	*
	*/

	// connect() is a function that injects Redux-related props into your component.
	// You can inject data and callbacks that change that data by dispatching actions.
	function connect(mapStateToProps, mapDispatchToProps) {
	// It lets us inject component as the last step so people can use it as a decorator.
	// Generally you don't need to worry about it.
	return function (WrappedComponent) {
	// It returns a component
	return class extends React.Component {
	render() {
	return (

	// This is free and unencumbered software released into the public domain.

	// Marshals a string to an Uint8Array.
	function encodeUTF8(s) {
	var i = 0, bytes = new Uint8Array(s.length * 4);
	for (var ci = 0; ci != s.length; ci++) {
	var c = s.charCodeAt(ci);
	if (c < 128) {
	bytes[i++] = c;
	continue;

	/*
	DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
	Version 2, December 2004

	Copyright (C) 2016 Esa-Matti Suuronen <[email protected]>

	Everyone is permitted to copy and distribute verbatim or modified
	copies of this license document, and changing it is allowed as long
	as the name is changed.

	package com.netease.cc.mgsdk.util;

	import java.lang.reflect.Field;

	import android.app.Activity;
	import android.content.Context;
	import android.view.View;

	public class IdentifierUtil {
	/**

	public class RealPathUtil {

	public static String getRealPath(Context context, Uri fileUri) {
	String realPath;
	// SDK < API11
	if (Build.VERSION.SDK_INT < 11) {
	realPath = RealPathUtil.getRealPathFromURI_BelowAPI11(context, fileUri);
	}
	// SDK >= 11 && SDK < 19
	else if (Build.VERSION.SDK_INT < 19) {

罗坤 1uokun

Advanced memoization and effects in React

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

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