add notes about why singletones are better than context, update swatc…

…h.tsx to use an effect when calling onColorChange

src/react-render-perf/lesson-02/solution/color-picker-event-emitter.ts

@@ -3,8 +3,12 @@ import {EventEmitter} from "eventemitter3";
 export class ColorPickerEventEmitter extends EventEmitter {
     selectedColor: string | undefined;
 
-    public onColorChange(color: string, callback: (state: boolean) => void) {
+    public onColorChange(
+        color: string,
+        callback: (state: boolean) => void,
+    ): () => void {
         this.on(color, callback);
+        return () => this.off(color, callback);
     }
 
     public onSelectedColorChange(callback: (selectedColor: string) => void) {

src/react-render-perf/lesson-02/solution/swatch.tsx

@@ -1,4 +1,4 @@
-import {useContext, useState} from "react";
+import {useContext, useEffect, useState} from "react";
 
 import {Color, toCssColor} from "../../shared/color";
 import {ColorPickerContext} from "./color-picker-context";
@@ -12,7 +12,12 @@ export function Swatch({color, size}: Props) {
     const colorPickerEventEmitter = useContext(ColorPickerContext)!;
     const [isSelected, setIsSelected] = useState(false);
 
-    colorPickerEventEmitter.onColorChange(toCssColor(color), setIsSelected);
+    useEffect(() => {
+        return colorPickerEventEmitter.onColorChange(
+            toCssColor(color),
+            setIsSelected,
+        );
+    }, [color, colorPickerEventEmitter]);
 
     return (
         <div

src/react-render-perf/lesson-03/README.md

@@ -6,6 +6,19 @@ If your context contains an event emitter (or other class instance) and it's onl
 used once in your application, you can simplify things even further by using a
 singleton instance of it.
 
+While singletons are often frowned upon, their use in this scenario offers several
+benefits over React Context:
+
+- By default Context will often result in unnecessary re-renders while using a
+  singleton will not.
+- Context is only available in React so if other code needs access to that data
+  we need to figure out some way to pipe that data to that code whereas with a
+  singleton, that code can just import it.
+- Testing components that use React Context require wrapper the component in an
+  appropriate provider which isn't that bad on its own but often times you'll need
+  to update the value in the Context.  Updates are easier with a singleton.  The
+  only thing we need is a way to reset the singleton before each test.
+
 ## Example
 
 Using our example from [Lesson 2](../lesson-02/README.md) we can replace the context

src/react-render-perf/lesson-03/exercise/color-picker-event-emitter.ts

@@ -3,8 +3,12 @@ import {EventEmitter} from "eventemitter3";
 export class ColorPickerEventEmitter extends EventEmitter {
     selectedColor: string | undefined;
 
-    public onColorChange(color: string, callback: (state: boolean) => void) {
+    public onColorChange(
+        color: string,
+        callback: (state: boolean) => void,
+    ): () => void {
         this.on(color, callback);
+        return () => this.off(color, callback);
     }
 
     public onSelectedColorChange(callback: (selectedColor: string) => void) {

src/react-render-perf/lesson-03/exercise/swatch.tsx

@@ -1,4 +1,4 @@
-import {useContext, useState} from "react";
+import {useContext, useEffect, useState} from "react";
 
 import {Color, toCssColor} from "../../shared/color";
 import {ColorPickerContext} from "./color-picker-context";
@@ -12,7 +12,12 @@ export function Swatch({color, size}: Props) {
     const colorPickerEventEmitter = useContext(ColorPickerContext)!;
     const [isSelected, setIsSelected] = useState(false);
 
-    colorPickerEventEmitter.onColorChange(toCssColor(color), setIsSelected);
+    useEffect(() => {
+        return colorPickerEventEmitter.onColorChange(
+            toCssColor(color),
+            setIsSelected,
+        );
+    }, [color, colorPickerEventEmitter]);
 
     return (
         <div

src/react-render-perf/lesson-03/solution/color-picker-event-emitter.ts

@@ -3,8 +3,12 @@ import {EventEmitter} from "eventemitter3";
 class ColorPickerEventEmitter extends EventEmitter {
     selectedColor: string | undefined;
 
-    public onColorChange(color: string, callback: (state: boolean) => void) {
+    public onColorChange(
+        color: string,
+        callback: (state: boolean) => void,
+    ): () => void {
         this.on(color, callback);
+        return () => this.off(color, callback);
     }
 
     public onSelectedColorChange(callback: (selectedColor: string) => void) {

src/react-render-perf/lesson-03/solution/swatch.tsx

@@ -1,4 +1,4 @@
-import {useState} from "react";
+import {useEffect, useState} from "react";
 
 import {Color, toCssColor} from "../../shared/color";
 import {colorPickerEventEmitter} from "./color-picker-event-emitter";
@@ -11,7 +11,12 @@ type Props = {
 export function Swatch({color, size}: Props) {
     const [isSelected, setIsSelected] = useState(false);
 
-    colorPickerEventEmitter.onColorChange(toCssColor(color), setIsSelected);
+    useEffect(() => {
+        return colorPickerEventEmitter.onColorChange(
+            toCssColor(color),
+            setIsSelected,
+        );
+    }, [color]);
 
     return (
         <div