Matthew Marcus RavenHursT

I've created a very simple example here..

https://codesandbox.io/s/react-memo-with-function-props-09fgyo

As you can see, ComponentB renders just as many times as ComponentB.. even though it's wrapped in memo and isn't receiving counter as a prop.

If you open up the app in it's own page (https://09fgyo.csb.app/) and then use React DevTools to profile the page, you'll see that it's reporting it's cause for rendering is because the onClick prop changes:

	const wordsAreAnagrams = (a: string, b: string) =>
	a.split("").sort().join("") === b.split("").sort().join("")

	const findAnagram = (word: string, compareList: string[]) => {
	let result = null
	compareList.every((w: string) => {
	if (wordsAreAnagrams(word, w)) {
	result = w
	return false
	}

	const arraySample = (array: any[], targetSampleLength: number): any[] => {
	const currentLength = array.length
	if (currentLength <= targetSampleLength) {
	return array
	}
	const lastIndex = array.length - 1
	const increment = Math.ceil(currentLength / targetSampleLength)

	let newArray = []

	export const replaceItemInList = (
	item: unknown,
	list: unknown[],
	index: number
	) => [
	...list.slice(0, index),
	item,
	...list.slice(index + 1)
	]

	// Each index in the array corrisponds to a day of the week.
	// Let the consumer of the API decide what each day should be labelled as, based on their L18N/I18N implementation.
	// Z-07:00:00 is EST. Z-offset should be set by the client to reflect the TZ of the user that set the value.
	{
	"working_hours": [
	["09:00:00Z-07:00:00", "17:00:00Z-07:00:00"],
	["09:00:00Z-07:00:00", "17:00:00Z-07:00:00"],
	["09:00:00Z-07:00:00", "17:00:00Z-07:00:00"],
	["09:00:00Z-07:00:00", "17:00:00Z-07:00:00"],
	["09:00:00Z-07:00:00", "15:00:00Z-07:00:00"],

	function flatten(source, k, keyPath = [], result = {}) {
	if(typeof source !== `object` \|\| source === null) {
	result[keyPath.join('.')] = source

	return result
	}
	let iterationResult
	for (k in source) {
	keyPath.push(k)
	iterationResult = flatten(source[k], k, keyPath, result)

	fpkill() {
	lsof -i tcp:$1 \| awk 'NR!=1 {print $2}' \| xargs kill -9
	}

	import ReactDOM from 'react-dom'
	import { createStore, applyMiddleware } from 'redux'
	import getRootEpic from '../../store/epics/root.epic'
	import {createEpicMiddleware} from 'redux-observable'
	import reduxLogger from 'redux-logger'
	import { Provider } from 'react-redux'
	import MainApp from './main-app.component'
	import { BrowserRouter } from 'react-router-dom'
	import appReducers from '../../store/reducers'
	import { CookiesProvider } from 'react-cookie'

	{
	"value": 20.50,
	"currency": "USD"
	}