Chris Edwards chrise86

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

Moved to Shopify/graphql-design-tutorial

	import SwiftUI
	import PlaygroundSupport

	struct Desktop: View {
	var body: some View {
	ZStack {
	// Image(uiImage: #imageLiteral(resourceName: "IMG_6281.JPG"))
	Color(UIColor.systemBlue)
	macOS()
	}

	import React, {useMemo} from 'react'
	import Animated from 'react-native-reanimated'
	import {View, Dimensions, StyleSheet} from 'react-native'
	import FastImage from 'react-native-fast-image'
	import ConfettiImage from 'assets/images/confetti.png'

	const NUM_CONFETTI = 100
	const COLORS = ['#00e4b2', '#09aec5', '#107ed5']
	const CONFETTI_SIZE = 16

	class SubdomainConstraint
	# used in routes to generate subdomains

	# note there is a cache buster in company.rb in case the subdomain is updated - `reload_routes`
	# update it if we write any additional cache entries here
	RESERVED_SUB_DOMAINS = %w[
	www app admin test staging help support wwww cdn owner media intercom mail r _domainkey blog webhooks webhook
	hooks api api-test api-staging referral outbound mail webmail w3 mailboxes io heroku inbound google search
	].freeze

	<html>
	<head>
	<style type='text/css'>
	body, html {
	margin: 0;
	padding: 0;
	}
	body {
	color: black;
	display: table;

	import { ApolloClient } from 'apollo-client'
	import { split } from 'apollo-link'
	import { HttpLink } from 'apollo-link-http'
	import { InMemoryCache } from 'apollo-cache-inmemory'
	import { getMainDefinition } from 'apollo-utilities'
	import { createPersistedQueryLink } from 'apollo-link-persisted-queries'
	import { setContext } from 'apollo-link-context'

	// AC: IMPORT ACTIONCABLE
	import ActionCable from 'actioncable'

	module Types
	module PageableType
	include Types::Base::Interface
	field :current_page, Integer, null: true
	field :previous_page, Integer, null: true, method: :prev_page
	field :next_page, Integer, null: true
	field :total_pages, Integer, null: true
	field :total_items, Integer, null: true, method: :total_count
	field :size, Integer, null: true, method: :count
	field :first_page, Boolean, null: true, method: :first_page?

	<div data-controller="smart-scroll"
	data-action="smart-scroll:added->smart-scroll#handleAdded
	resize->smart-scroll#handleAdded
	scroll->smart-scroll#handleScroll">
	<div data-controller="smart-scroll-item">
	aya: an an
	</div>
	<div data-controller="smart-scroll-item">
	hatate: ni hao
	</div>

	import axios from 'axios'
	import toast from './toast'

	function errorResponseHandler(error) {
	// check for errorHandle config
	if( error.config.hasOwnProperty('errorHandle') && error.config.errorHandle === false ) {
	return Promise.reject(error);
	}

	// if has response show the error