Understanding the useMemo design
React provides a useMemo hook to support a value assignment through a function that can either return a new value or an old value from the previous update:
const Title = () => {
const label = useMemo(() => {
return "Hello World"
}, [])
}
The useMemo function takes a create function as its first input argument. This function returns a new value if invoked. The second parameter is a deps dependency array, similar to deps in useEffect. In the preceding case, "Hello World" is assigned to a label variable only once after the mount.
There's no additional data structure required for useMemo other than the basic hook support, as shown in Figure 6.1:
Figure 6.1 – Data structure for useMemo
The hook's state persists between updates, and it's up to each hook function to define what (or in which format) it wants to persist. For instance...