100 |

101 |

102 |

103 | ) 104 | } 105 | 106 | await t.throwsAsync(render([1, 2, 3], () => ( 107 | 108 | ))) 109 | }) 110 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | const $calls = Symbol("calls") 4 | const inProduction = typeof process !== "undefined" && process.env && process.env.NODE_ENV === "production" 5 | 6 | type MemoFunction = (value: T, deps: any[]) => T 7 | 8 | type MapToMemoizers = { 9 | [key in Key]: MemoFunction 10 | } & { 11 | [$calls]: Set 12 | } 13 | 14 | function doSelectorsMatch(expected: any[], actual: any[]) { 15 | if (expected.length !== actual.length) { 16 | // tslint:disable-next-line no-console 17 | console.error("Memo selectors array's length is not supposed to change between calls.") 18 | return false 19 | } 20 | 21 | for (let index = 0; index < expected.length; index++) { 22 | if (actual[index] !== expected[index]) { 23 | return false 24 | } 25 | } 26 | return true 27 | } 28 | 29 | function createMemoizerFunction( 30 | callerID: string, 31 | memoized: Map, 32 | getCalls: () => Set 33 | ) { 34 | return function memo(value: T, selectors: any[]): T { 35 | const calls = getCalls() 36 | const prevMemoItem = memoized.get(callerID) 37 | 38 | if (!prevMemoItem && !selectors) { 39 | throw Error("No memo selectors passed. Pass selectors as 2nd argument.") 40 | } 41 | if (!prevMemoItem && !Array.isArray(selectors)) { 42 | throw Error("Memo selectors must be an array.") 43 | } 44 | if (!inProduction && calls.has(callerID)) { 45 | throw Error( 46 | `Inline memoizer memo.${callerID}() called twice during one render. ` + 47 | `This is usually a mistake, probably caused by copy & paste.` 48 | ) 49 | } 50 | 51 | const needToUpdate = !prevMemoItem || !doSelectorsMatch(prevMemoItem[0], selectors) 52 | 53 | if (needToUpdate) { 54 | memoized.set(callerID, [selectors, value]) 55 | } 56 | if (!inProduction) { 57 | calls.add(callerID) 58 | } 59 | 60 | return prevMemoItem ? prevMemoItem[1] : value 61 | } 62 | } 63 | 64 | function createMemoObjectWithKeys( 65 | identifiers: Key[], 66 | memoized: Map 67 | ): MapToMemoizers { 68 | const memo = {} as MapToMemoizers 69 | const getCalls = () => memo[$calls] 70 | 71 | for (const identifier of identifiers) { 72 | memo[identifier] = createMemoizerFunction(identifier, memoized, getCalls) as any 73 | } 74 | 75 | return memo 76 | } 77 | 78 | function createMemoProxyObject( 79 | memoized: Map 80 | ): MapToMemoizers { 81 | if (typeof Proxy === "undefined") { 82 | throw Error( 83 | "The JavaScript runtime does not support ES2015 Proxy objects.\n" + 84 | "Please call the hook with explicit property keys, like this:\n" + 85 | " useInlineMemo(\"key1\", \"key2\")" 86 | ) 87 | } 88 | 89 | const memo = {} as MapToMemoizers 90 | const getCalls = () => memo[$calls] 91 | 92 | return new Proxy(memo, { 93 | get(target, property) { 94 | const identifier = property as Key 95 | const initializedProp = target[identifier] 96 | 97 | if (initializedProp) { 98 | return initializedProp 99 | } else { 100 | const memoizer = createMemoizerFunction(identifier, memoized, getCalls) 101 | target[identifier] = memoizer as any 102 | return memoizer 103 | } 104 | } 105 | }) 106 | } 107 | 108 | export default function useInlineMemo(): MapToMemoizers 109 | export default function useInlineMemo(...identifiers: Key[]): MapToMemoizers 110 | export default function useInlineMemo(...identifiers: Key[]): MapToMemoizers { 111 | const memoized = React.useMemo(() => new Map(), []) 112 | 113 | const memoObject = React.useMemo(() => { 114 | if (identifiers.length > 0) { 115 | return createMemoObjectWithKeys(identifiers, memoized) 116 | } else { 117 | return createMemoProxyObject(memoized) 118 | } 119 | }, []) 120 | 121 | // Re-init the calls every time useInlineMemo() is called 122 | memoObject[$calls] = new Set() 123 | 124 | return memoObject 125 | } 126 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

⚛︎ use-inline-memo

2 | 3 |

4 | React hook for memoizing values and callbacks anywhere in a component. 5 |

6 | 7 |

8 | 9 | 10 |

11 | 12 |
13 | 14 | Like other hooks, you can call [`React.useMemo()`](https://reactjs.org/docs/hooks-reference.html#usememo) and [`React.useCallback()`](https://reactjs.org/docs/hooks-reference.html#usecallback) only at the top of your component function and not use them conditionally. 15 | 16 | Inline memos let us memoize anywhere without the restrictions that apply to the usage of hooks! 17 | 18 | ```jsx 19 | import { Button, TextField } from "@material-ui/core" 20 | import React from "react" 21 | import useInlineMemo from "use-inline-memo" 22 | 23 | function NameForm(props) { 24 | const memo = useInlineMemo() 25 | const [newName, setNewName] = React.useState(props.prevName) 26 | 27 | // Conditional return prevents calling any hook after this line 28 | if (props.disabled) { 29 | return

(Disabled)

30 | } 31 | 32 | return ( 33 | 34 | setNewName(event.target.value), [])} 37 | value={newName} 38 | /> 39 | 45 | 46 | ) 47 | } 48 | ``` 49 | 50 | ## Installation 51 | 52 | ``` 53 | npm install use-inline-memo 54 | ``` 55 | 56 | ## Usage 57 | 58 | Everytime you want to memoize a value, call `memo.X()` with an identifier `X` of your choice. This identifier will be used to map the current call to values memoized in previous component renderings. 59 | 60 | Calling `useInlineMemo()` without arguments should work in all ES2015+ runtimes as it requires the ES2015 `Proxy`. If you need to support older browsers like the Internet Explorer, you will have to state the memoization keys up-front: 61 | 62 | ```jsx 63 | function NameForm(props) { 64 | // Explicit keys to make it work in IE11 65 | const memo = useInlineMemo("nameChange", "submitClick", "submitStyle") 66 | const [newName, setNewName] = React.useState(props.prevName) 67 | 68 | return ( 69 | 70 | setNewName(event.target.value), [])} 73 | value={newName} 74 | /> 75 | 81 | 82 | ) 83 | } 84 | ``` 85 | 86 | When not run in production, there is also a check in place to prevent you from accidentally using the same identifier for two different values. Calling `memo.X()` with the same `X` twice during one rendering will lead to an error. 87 | 88 | ## Use cases 89 | 90 | ### Event listeners 91 | 92 | Inline memoizers are perfect to define simple one-line callbacks in-place in the JSX without sacrificing performance. 93 | 94 | ```jsx 95 | // Before 96 | function Component() { 97 | const [value, setValue] = React.useState("") 98 | const onUserInput = React.useCallback( 99 | (event: React.SyntheticEvent) => setValue(event.target.value), 100 | [] 101 | ) 102 | return ( 103 | 104 | ) 105 | } 106 | ``` 107 | 108 | ```jsx 109 | // After 110 | function Component() { 111 | const memo = useInlineMemo() 112 | const [value, setValue] = React.useState("") 113 | return ( 114 | setValue(event.target.value), [])} 116 | value={value} 117 | /> 118 | ) 119 | } 120 | ``` 121 | 122 | ### `style` props & other objects 123 | 124 | Using inline style props is oftentimes an express ticket to unnecessary re-renderings as you will create a new style object on each rendering, even though its content will in many cases never change. 125 | 126 | ```jsx 127 | // Before 128 | function Component() { 129 | return ( 130 | 133 | ) 134 | } 135 | ``` 136 | 137 | ```jsx 138 | // After 139 | function Component() { 140 | const memo = useInlineMemo() 141 | return ( 142 | 145 | ) 146 | } 147 | ``` 148 | 149 | You don't need to memoize every style object of every single DOM element, though. Use it whenever you pass an object to a complex component which is expensive to re-render. 150 | 151 | For more background information check out [FAQs: Why memoize objects?](#faqs). 152 | 153 | ## API 154 | 155 | #### `useInlineMemo(): MemoFunction` 156 | 157 | Call it once in a component to obtain the `memo` object carrying the memoization functions. 158 | 159 | #### `useInlineMemo(...keys: string[]): MemoFunction` 160 | 161 | State the memoization keys explicitly if you need to support Internet Explorer where `Proxy` is not available. 162 | 163 | #### `memo[id: string](value: T, deps: any[]): T` 164 | 165 | Works the same as a call to `React.useMemo()` or `React.useCallback()`, only without the wrapping callback function. That wrapping function is useful to run expensive instantiations only if we actually refresh the value, but for our use case this is rather unlikely, so we provide you with a more convenient API instead. 166 | 167 | `id` is used to map different memoization calls between component renderings. 168 | 169 | ## FAQs 170 | 171 |

172 |

How does that work?

173 | 174 | The reason why React hooks cannot be called arbitrarily is that React needs to match the current hook call to previous calls. The only way it can match them is by assuming that the same hooks will always be called in the same order. 175 | 176 | So what we do here is to provide a hook `useInlineMemo()` that creates a `Map` to match `memo.X()` calls to the memoized value and the deps array. We can match calls to `memo.X()` between different re-renderings by using `X` as an identifier. 177 |

178 | 179 |

180 |

Why is memoization so important?

181 | 182 | To ensure good performance you want to re-render as few components as possible if some application state changes. In React we use `React.memo()` for that which judges by comparing the current component props to the props of the previous rendering. 183 | 184 | Without memoization we will very often create the same objects, callbacks, ... with the same content over and over again for each rendering, but as they are new instances every time, they will not be recognized as the same values and cause unnecessary re-renderings (see "Why memoize objects?" below). 185 |

186 | 187 |

188 |

Why memoize objects?

189 | 190 | When `React.memo()` determines whether a component needs to be re-rendered, it tests if the property values are equivalent to the property values of the last rendering. It does though by comparing them for equality by reference, as anything else would take too much time. 191 | 192 | Now if the parent component creates a new object and passes it to the component as a property, React will only check if the object is exactly the same object instance as for the last rendering (`newObject === prevObject`). Even if the object has exactly the same properties as before, with the exact same values, it will nevertheless be a new object that just happens to have the same content. 193 | 194 | Without memoization `React.memo()` will always re-render the component as we keep passing new object instances – the equality comparison of the old and the new property value will never be true. Memoization makes sure to re-use the actual last object instance, thus skipping re-rendering. 195 |

196 | 197 | ## License 198 | 199 | MIT 200 | --------------------------------------------------------------------------------