dimitris kyriazopoulos DimitrK

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

'Include' in Sequelize: The One Confusing Query That You Should Memorize

When querying your database in Sequelize, you'll often want data associated with a particular model which isn't in the model's table directly. This data is usually typically associated through join tables (e.g. a 'hasMany' or 'belongsToMany' association), or a foreign key (e.g. a 'hasOne' or 'belongsTo' association).

When you query, you'll receive just the rows you've looked for. With eager loading, you'll also get any associated data. For some reason, I can never remember the proper way to do eager loading when writing my Sequelize queries. I've seen others struggle with the same thing.

Eager loading is confusing because the 'include' that is uses has unfamiliar fields is set in an array rather than just an object.

So let's go through the one query that's worth memorizing to handle your eager loading.

The Basic Query

Setting up Babel and nodemon

Inital set-up

Set up project:

mkdir project
cd project
npm init -y

	# To make it easier to work on a anti git flow branching model described here: http://endoflineblog.com/gitflow-considered-harmful
	# the following aliases have been created
	[alias]
	lg = log --graph --pretty=format:'%Cred%h%Creset [%C(dim cyan)%ad%Creset] %C(dim green)%an%Creset: %C(bold dim white)%s%Creset %C(auto)%d%Creset' --date=short
	make-hotfix = !git stash && git hotfix-create $1 && git stash pop && :
	graph = log --graph --color --pretty=format:'%Cred%h%Creset [%C(dim cyan)%cr%Creset] %C(dim green)%an%Creset: %C(bold dim white)%s%Creset %C(auto)%d%Creset'
	tree = log --all --graph --decorate=short --color --format=format:'%C(bold blue)%h%C(reset) %C(auto)%d%C(reset)\n %C(dim cyan)[%cr]%C(reset) %x09%C(dim cyan)%an:%C(reset) %C(bold cyan)%s %C(reset)'
	hotfix-create = "!f() {\
	red=`tput setaf 1`;\
	yellow=`tput setaf 3`;\

	The MIT License (MIT)

	Copyright (c) 2015 Justin Perry

	Permission is hereby granted, free of charge, to any person obtaining a copy of
	this software and associated documentation files (the "Software"), to deal in
	the Software without restriction, including without limitation the rights to
	use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
	the Software, and to permit persons to whom the Software is furnished to do so,
	subject to the following conditions:

	// Transforms a property of object which includes dots to nested property as follows
	// object = {};
	// object["firstlevelprop.secondlevelprop"] = "something" =to=> object["firstlevelprop"]["secondlevelprop"] = "something"
	(function () {
	var enableExpand = function () {
	//We dont want the method to appear in the object and mess with the rest of our object's properties
	Object.defineProperty(this, "expand", {
	enumerable: false, // Not visible
	configurable: false, // Not configurable
	value: function () {

	:: Brackets Extensions Updater
	:: Dimitris Kyriazopoulos. jim.feedback at Google mail dot com
	:: MIT License. For more info visit http://opensource.org/licenses/MIT
	@echo off

	call:iterateFolders >> updatelog.xml
	echo.&goto:eof

	:iterateFolders
	set "extensionsDir=%~dp0"

	// This is the Android version of the Tweetie-like pull to refresh table:
	// http://developer.appcelerator.com/blog/2010/05/how-to-create-a-tweetie-like-pull-to-refresh-table.html

	var win = Ti.UI.currentWindow;

	var alertDialog = Titanium.UI.createAlertDialog({
	title: 'System Message',
	buttonNames: ['OK']
	});
	var scrollView = Ti.UI.createScrollView({

	const arr1 = [1,2,3]
	const arr2 = [4,5,6]
	const arr3 = [...arr1, ...arr2] //arr3 ==> [1,2,3,4,5,6]