{"id":3116,"date":"2021-11-04T18:34:43","date_gmt":"2021-11-05T00:34:43","guid":{"rendered":"https:\/\/www.pensemosweb.com\/?p=3116"},"modified":"2024-04-02T16:54:10","modified_gmt":"2024-04-02T22:54:10","slug":"memoization-usememo-y-usecallback","status":"publish","type":"post","link":"https:\/\/pensemosweb.com\/en\/memoization-usememo-y-usecallback\/","title":{"rendered":"Memoization, useMemo and useCallback"},"content":{"rendered":"

Para comenzar a entender el uso de useMemo<\/strong> and useCallback<\/strong>, es necesario entender lo que es memoization<\/strong> either memoizaci\u00f3n<\/strong> en espa\u00f1ol.<\/p>\n\n\n\n

\u00bfQu\u00e9 es memoization?<\/h2>\n\n\n\n

Memoization<\/strong> es una tecnica de optimizaci\u00f3n en el codigo para evitar repetir el trabajo computacional previamente realizado. Es por eso que la palabra memo<\/strong>, se refiere a poder recordar un resultado calculado anteriormente.<\/p>\n\n\n\n

Tambien se puede entender como la forma de hacer cache de los resultados previos y evitar trabajo innecesario.<\/p>\n\n\n\n

Memoization en funciones de Javascript<\/h2>\n\n\n\n

Cuando se trabaja con funciones en Javascript es f\u00e1cil de implementar memoization<\/strong>, se puede usar closure o simplemente agregar una propiedad a la funci\u00f3n (una funci\u00f3n es un objeto<\/a>). Esta propiedad normalmente puede ser un objeto o un array para guardar los resultados ya calculados.<\/p>\n\n\n\n

Voy a escribir un ejemplo, nos quedamos con lo m\u00e1s simple agregando una propiedad memo<\/code> a la funci\u00f3n.<\/p>\n\n\n\n

<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
function<\/span> <\/span>multiplyByTen<\/span>(<\/span>number<\/span>)<\/span> <\/span>{<\/span><\/span>\n  <\/span>const<\/span> <\/span>memo<\/span> <\/span>=<\/span> <\/span>multiplyByTen<\/span>.<\/span>memo<\/span>;<\/span><\/span>\n  <\/span>const<\/span> <\/span>memoResult<\/span> <\/span>=<\/span> <\/span>memo<\/span>[<\/span>number<\/span>]<\/span>;<\/span><\/span>\n  <\/span>if<\/span> (<\/span>memoResult<\/span> <\/span>===<\/span> <\/span>undefined<\/span>) <\/span>{<\/span><\/span>\n    <\/span>memo<\/span>[<\/span>number<\/span>] <\/span>=<\/span> <\/span>number<\/span> <\/span>*<\/span> <\/span>10<\/span>;<\/span><\/span>\n  <\/span>}<\/span><\/span>\n  <\/span>return<\/span> <\/span>memo<\/span>[<\/span>number<\/span>]<\/span>;<\/span><\/span>\n}<\/span><\/span>\nmultiplyByTen<\/span>.<\/span>memo <\/span>=<\/span> <\/span>{};<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Ahora si ejecutamos varias veces la funci\u00f3n con algunas valores para number<\/code>, los valores anteriormente calculados se extraen de la propiedad memo<\/code> ahorr\u00e1ndonos de c\u00e1lculos innecesarios. <\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
multiplyByTen<\/span>(<\/span>5<\/span>)<\/span>;<\/span> <\/span>\/\/ multiplica 5 * 10 = 50<\/span><\/span>\nmultiplyByTen<\/span>(<\/span>6<\/span>)<\/span>;<\/span> <\/span>\/\/ multiplica 6 * 10 = 60<\/span><\/span>\nmultiplyByTen<\/span>(<\/span>5<\/span>)<\/span>;<\/span> <\/span>\/\/ No se calcula y se obtiene el valor 50 de la propiedad memo<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
En el ejemplo expuesto multiplicar por diez es un c\u00e1lculo sencillo, pero si fuera uno que necesite mucho m\u00e1s poder computacional de lo normal, s\u00ed que valdr\u00eda la pena optimizar la funci\u00f3n con memoization<\/strong>.<\/p>\n\n\n\n
Memoization con React<\/h2>\n\n\n\n
En React la optimizaci\u00f3n con memoization es un poco diferente a lo que acabamos de ver, en React, solo se guarda el valor calculado anteriormente inmediato, y este se actualiza conforme se cambian los par\u00e1metros de la funci\u00f3n.<\/p>\n\n\n\n
Transformar conceptualmente el ejemplo anterior a la forma como React lo implementa, seria como el siguiente ejemplo.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
function<\/span> <\/span>multiplyByTen<\/span>(<\/span>number<\/span>)<\/span> <\/span>{<\/span><\/span>\n  <\/span>const<\/span> <\/span>prevInput<\/span> <\/span>=<\/span> <\/span>multiplyByTen<\/span>.<\/span>prevInput<\/span>;<\/span><\/span>\n  <\/span>if<\/span> (<\/span>prevInput<\/span> <\/span>!==<\/span> <\/span>number<\/span>) <\/span>{<\/span><\/span>\n    <\/span>multiplyByTen<\/span>.<\/span>prevInput<\/span> <\/span>=<\/span> <\/span>number<\/span>;<\/span><\/span>\n    <\/span>multiplyByTen<\/span>.<\/span>prevResult<\/span> <\/span>=<\/span> <\/span>number<\/span> <\/span>*<\/span> <\/span>10<\/span>;<\/span><\/span>\n  <\/span>}<\/span><\/span>\n  <\/span>return<\/span> <\/span>multiplyByTen<\/span>.<\/span>prevResult<\/span>;<\/span><\/span>\n}<\/span><\/span>\nmultiplyByTen<\/span>.<\/span>prevResult <\/span>=<\/span> <\/span>null;<\/span><\/span>\nmultiplyByTen<\/span>.<\/span>prevInput <\/span>=<\/span> <\/span>null;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
A continuaci\u00f3n, al invocar la funci\u00f3n con mismo par\u00e1metro que el anterior obtiene el valor previo, pero si los par\u00e1metros cambian, entonces si se hace el c\u00e1lculo del resultado y este \u00faltimo se guarda como el prevResult<\/code><\/strong>. As\u00ed tambi\u00e9n con el par\u00e1metro que se guarda como prevInput<\/code><\/strong>.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
multiplyByTen<\/span>(<\/span>5<\/span>)<\/span>;<\/span> <\/span>\/\/ si hace el c\u00e1lculo para regresar 50<\/span><\/span>\nmultiplyByTen<\/span>(<\/span>5<\/span>)<\/span>;<\/span> <\/span>\/\/ No hace el c\u00e1lculo porque el parametro es el mismo, regresaa 50<\/span><\/span>\nmultiplyByTen<\/span>(<\/span>6<\/span>)<\/span>;<\/span> <\/span>\/\/ Si hace el c\u00e1lculo, regresa 60<\/span><\/span>\nmultiplyByTen<\/span>(<\/span>5<\/span>)<\/span>;<\/span> <\/span>\/\/ Se hace el c\u00e1lculo porque este parametro es diferente al anterior 5 !== 6<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
React.memo para componentes<\/h2>\n\n\n\n
En Javascript existen las funciones de alto nivel, en React existen las funciones que generan a los componentes de alto nivel o HOC<\/strong> (High Order Component). Las cuales reciben como par\u00e1metro un componente y regresan uno nuevo.<\/p>\n\n\n\n
React.memo<\/code> es una funci\u00f3n que genera un HOC como resultado, pero adem\u00e1s optimiza el renderizado de este componente HOC.<\/p>\n\n\n\n
\u00bfC\u00f3mo funciona React.memo<\/code>?<\/h2>\n\n\n\n
Ya hab\u00edamos comentado que la memoization en React solo guarda los par\u00e1metros usados en la \u00faltima invocaci\u00f3n y el resultado anterior. Veamos un ejemplo de cuando se cambia el estado del elemento padre de un elemento creado con React.memo<\/code><\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
\/\/ Primer render hace el c\u00e1culo necesario<\/span><\/span>\n<<\/span>UserInfoMemo<\/span> <\/span>firstName<\/span>=<\/span>"<\/span>Jaime<\/span>"<\/span> <\/span>lastName<\/span>=<\/span>"<\/span>Cervantes<\/span>"<\/span>><\/<\/span>UserInfoMemo<\/span>><\/span><\/span>\n\/\/ Segundo render, ninguna propiedad cambia, no se hace otro c\u00e1lculo<\/span><\/span>\n<<\/span>UserInfoMemo<\/span> <\/span>firstName<\/span>=<\/span>"<\/span>Jaime<\/span>"<\/span> <\/span>lastName<\/span>=<\/span>"<\/span>Cervantes<\/span>"<\/span>><\/<\/span>UserInfoMemo<\/span>><\/span><\/span>\n\/\/ Tercer render, cambia firstName a "Juan", vuelve hacer el c\u00e1lculo del elemento<\/span><\/span>\n<<\/span>UserInfoMemo<\/span> <\/span>firstName<\/span>=<\/span>"<\/span>Juan<\/span>"<\/span> <\/span>lastName<\/span>=<\/span>"<\/span>Cervantes<\/span>"<\/span>><\/<\/span>UserInfoMemo<\/span>><\/span><\/span>\n\/\/ Cuarto render, se vuelve a cambiar firstName a "Jaime", hace otro c\u00e1lculo del elemento<\/span><\/span>\n<<\/span>UserInfoMemo<\/span> <\/span>firstName<\/span>=<\/span>"<\/span>Jaime<\/span>"<\/span> <\/span>lastName<\/span>=<\/span>"<\/span>Cervantes<\/span>"<\/span>><\/<\/span>UserInfoMemo<\/span>><\/span><\/span>\n\/\/ Quinto render, se cambia a lastName a "Velasco", hace otro c\u00e1lculo del elemento<\/span><\/span>\n<<\/span>UserInfoMemo<\/span> <\/span>firstName<\/span>=<\/span>"<\/span>Jaime<\/span>"<\/span> <\/span>lastName<\/span>=<\/span>"<\/span>Velasco<\/span>"<\/span>><\/<\/span>UserInfoMemo<\/span>><\/span><\/span>\n\/\/ Sexto render, ninguna propiedad cambia, no se hace otro c\u00e1lculo<\/span><\/span>\n<<\/span>UserInfoMemo<\/span> <\/span>firstName<\/span>=<\/span>"<\/span>Jaime<\/span>"<\/span> <\/span>lastName<\/span>=<\/span>"<\/span>Velasco<\/span>"<\/span>><\/<\/span>UserInfoMemo<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Example<\/h3>\n\n\n\n
El siguiente ejemplo se crea un componente llamado UserInfoMemo<\/strong><\/code> con la funci\u00f3n memo<\/code> y otro componente llamado UserInfo<\/code><\/strong> sin usar React.memo<\/code>.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
import<\/span> <\/span>{<\/span> <\/span>useState<\/span> <\/span>}<\/span> <\/span>from<\/span> <\/span>'<\/span>react<\/span>'<\/span>;<\/span><\/span>\nimport<\/span> UserInfoMemo <\/span>from<\/span> <\/span>'<\/span>.\/components\/UserInfoMemo<\/span>'<\/span>;<\/span><\/span>\nimport<\/span> UserInfo <\/span>from<\/span> <\/span>'<\/span>.\/components\/UserInfo<\/span>'<\/span>;<\/span><\/span>\nfunctions<\/span> <\/span>App<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>const<\/span> <\/span>[<\/span>title<\/span>,<\/span> <\/span>setTitle<\/span>]<\/span> <\/span>=<\/span> <\/span>useState<\/span>(<\/span>'<\/span>Memoization<\/span>'<\/span>)<\/span>;<\/span><\/span>\n  <\/span>const<\/span> <\/span>[<\/span>firstName<\/span>,<\/span> <\/span>setFirstName<\/span>]<\/span> <\/span>=<\/span> <\/span>useState<\/span>(<\/span>'<\/span>Jaime<\/span>'<\/span>)<\/span>;<\/span><\/span>\n  <\/span>const<\/span> <\/span>[<\/span>lastName<\/span>,<\/span> <\/span>setLastName<\/span>]<\/span> <\/span>=<\/span> <\/span>useState<\/span>(<\/span>'<\/span>Cervantes<\/span>'<\/span>)<\/span>;<\/span><\/span>\n  <\/span>console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>render App<\/span>'<\/span>)<\/span>;<\/span><\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <\/span><<\/span>div<\/span> <\/span>className<\/span>=<\/span>"<\/span>App<\/span>"<\/span>><\/span><\/span>\n      <\/span><<\/span>h1<\/span>>{<\/span>title<\/span>}<\/<\/span>h1<\/span>><\/span><\/span>\n      <\/span><<\/span>UserInfo<\/span> <\/span>firstName<\/span>={<\/span>firstName<\/span>} <\/span>lastName<\/span>={<\/span>lastName<\/span>}><\/<\/span>UserInfo<\/span>><\/span><\/span>\n      <\/span><<\/span>UserInfoMemo<\/span> <\/span>firstName<\/span>={<\/span>firstName<\/span>} <\/span>lastName<\/span>={<\/span>lastName<\/span>}><\/<\/span>UserInfoMemo<\/span>><\/span><\/span>\n      <\/span><<\/span>button<\/span> <\/span>onClick<\/span>={()<\/span> <\/span>=><\/span> <\/span>setTitle<\/span>(<\/span>'<\/span>Nuevo titulo<\/span>'<\/span>)<\/span>}><\/span>Nuevo titulo<\/span><\/<\/span>button<\/span>><\/span><\/span>\n      <\/span><<\/span>button<\/span> <\/span>onClick<\/span>={()<\/span> <\/span>=><\/span> <\/span>setTitle<\/span>(<\/span>'<\/span>Otro nuevo titulo<\/span>'<\/span>)<\/span>}><\/span>Otro titulo<\/span><\/<\/span>button<\/span>><\/span><\/span>\n      <\/span><<\/span>button<\/span> <\/span>onClick<\/span>={()<\/span> <\/span>=><\/span> <\/span>setFirstName<\/span>(<\/span>'<\/span>Juan<\/span>'<\/span>)<\/span>}><\/span>Nombre a Juan<\/span><\/<\/span>button<\/span>><\/span><\/span>\n      <\/span><<\/span>button<\/span> <\/span>onClick<\/span>={()<\/span> <\/span>=><\/span> <\/span>setFirstName<\/span>(<\/span>'<\/span>Jaime<\/span>'<\/span>)<\/span>}><\/span>Nombre a Jaime<\/span><\/<\/span>button<\/span>><\/span><\/span>\n      <\/span><<\/span>button<\/span> <\/span>onClick<\/span>={()<\/span> <\/span>=><\/span> <\/span>setLastName<\/span>(<\/span>'<\/span>Velasco<\/span>'<\/span>)<\/span>}><\/span>Apellido a Velasco<\/span><\/<\/span>button<\/span>><\/span><\/span>\n      <\/span><<\/span>button<\/span> <\/span>onClick<\/span>={()<\/span> <\/span>=><\/span> <\/span>setLastName<\/span>(<\/span>'<\/span>Cervantes<\/span>'<\/span>)<\/span>}><\/span>Apellido a Cervantes<\/span><\/<\/span>button<\/span>><\/span><\/span>\n    <\/span><\/<\/span>div<\/span>><\/span><\/span>\n  )<\/span>;<\/span><\/span>\n}<\/span><\/span>\nexport<\/span> <\/span>default<\/span> App<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Cuando cambia el estado de title<\/code> in App<\/code>, UserInfo<\/code> se vuelve a renderizar, pero UserInfoMemo<\/code> no, este \u00faltimo solo se renderiza cuando su propiedad firstName<\/code> cambia. Puedes probarlo presionando los botones de t\u00edtulo<\/strong> que provocan cambios en el estado title<\/code> y los botones Juan y Pepe que provocan cambios en el estado de firstName<\/code>.<\/p>\n\n\n\n
A continuaci\u00f3n el c\u00f3digo de <UserInfo><\/strong><\/code> and <UserInfoMemo><\/strong><\/code>.<\/p>\n\n\n\n
components\/UserInfo.js<\/strong><\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
export<\/span> <\/span>default<\/span> <\/span>functions<\/span> <\/span>UserInfo<\/span>({<\/span> <\/span>firstName<\/span> <\/span>})<\/span> <\/span>{<\/span><\/span>\n  <\/span>console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>render<\/span>'<\/span>)<\/span>;<\/span><\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <\/span><<\/span>div<\/span>><\/span><\/span>\n      <\/span><<\/span>h2<\/span>><\/span>UserInfo<\/span><\/<\/span>h2<\/span>><\/span><\/span>\n      <\/span><<\/span>p<\/span>><\/span>firstName: <\/span>{<\/span>firstName<\/span>}<\/<\/span>p<\/span>><\/span><\/span>\n    <\/span><\/<\/span>div<\/span>><\/span><\/span>\n  )<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
components\/UserInfoMemo.js<\/strong><\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
import<\/span> <\/span>{<\/span> <\/span>memo<\/span> <\/span>}<\/span> <\/span>from<\/span> <\/span>"<\/span>react<\/span>"<\/span>;<\/span><\/span>\nconst<\/span> UserInfoMemo <\/span>=<\/span> <\/span>memo<\/span>(<\/span>({<\/span> <\/span>firstName<\/span>,<\/span> <\/span>lastName<\/span> <\/span>})<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n  <\/span>console<\/span>.<\/span>log<\/span>(<\/span>"<\/span>Render UserInfoMemo<\/span>"<\/span>)<\/span>;<\/span><\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <\/span><<\/span>div<\/span>><\/span><\/span>\n      <\/span><<\/span>h2<\/span>><\/span>UserInfoMemo<\/span><\/<\/span>h2<\/span>><\/span><\/span>\n      <\/span><<\/span>p<\/span>><\/span>firstName: <\/span>{<\/span>firstName<\/span>}<\/<\/span>p<\/span>><\/span><\/span>\n      <\/span><<\/span>p<\/span>><\/span>lastName: <\/span>{<\/span>lastName<\/span>}<\/<\/span>p<\/span>><\/span><\/span>\n    <\/span><\/<\/span>div<\/span>><\/span><\/span>\n  )<\/span>;<\/span><\/span>\n}<\/span>)<\/span>;<\/span><\/span>\nexport<\/span> <\/span>default<\/span> UserInfoMemo<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Puedes probar el ejemplo en codesanbox.io<\/a>.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
<<\/span>to<\/span> <\/span>href<\/span>=<\/span>"<\/span>https:\/\/codesandbox.io\/s\/react-memo-hjq0w?fontsize=14&hidenavigation=1&theme=dark<\/span>"<\/span>><\/span><\/span>\n  <\/span><<\/span>img<\/span> <\/span>alt<\/span>=<\/span>"<\/span>Edit React.memo<\/span>"<\/span> <\/span>src<\/span>=<\/span>"<\/span>https:\/\/codesandbox.io\/static\/img\/play-codesandbox.svg<\/span>"<\/span>><\/span><\/span>\n<\/<\/span>to<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
useMemo<\/h2>\n\n\n\n
El hook useMemo<\/code> te permite recordar el valor anterior si los par\u00e1metros usados para el c\u00e1lculo no cambian, tal cual implementa el concepto de memoization en React recordando solo el valor anterior.<\/p>\n\n\n\n
La sintaxis es la siguiente.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
useMemo<\/span>(<\/span><\/span>\n  <\/span>()<\/span> <\/span>=><\/span> <\/span>computeExpensiveValue<\/span>(a<\/span>,<\/span> b)<\/span>,<\/span><\/span>\n  [a<\/span>,<\/span> b]<\/span><\/span>\n)<\/span>;<\/span><\/span>\n\/\/ o as\u00ed:<\/span><\/span>\nuseMemo<\/span>(<\/span><\/span>\n  <\/span>functions<\/span>()<\/span> <\/span>{<\/span><\/span>\n    <\/span>return<\/span> <\/span>computeExpensiveValue<\/span>(<\/span>to<\/span>,<\/span> <\/span>b<\/span>)<\/span>;<\/span><\/span>\n  <\/span>},<\/span><\/span>\n  [a<\/span>,<\/span> b]<\/span><\/span>\n)<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Recibe una funci\u00f3n para realizar un c\u00e1lculo que involucre un gasto considerable de tiempo y recursos computacionales. Y como segundo par\u00e1metro una array de dependencias, para que solo se vuelva a ejecutar la funci\u00f3n si alguna de las dependencias ha cambiado, de lo contrario regresa el valor recordado previamente.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
const<\/span> memoizedValue <\/span>=<\/span> <\/span>useMemo<\/span>(expensiveCallback<\/span>,<\/span> deps)<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Ejemplo sin useMemo<\/h3>\n\n\n\n
Vamos a suponer que el arreglo de usuarios es muy grande y se obtiene a partir de la petici\u00f3n a un servicio, cada vez que se hace render de <App><\/strong><\/code> se hace la petici\u00f3n y se genera el arreglo cuando cambiamos el estado de selectedUser<\/strong><\/code><\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
import<\/span> <\/span>{<\/span> <\/span>useState<\/span> <\/span>}<\/span> <\/span>from<\/span> <\/span>"<\/span>react<\/span>"<\/span>;<\/span><\/span>\nimport<\/span> UserList <\/span>from<\/span> <\/span>"<\/span>.\/components\/UserList<\/span>"<\/span>;<\/span><\/span>\nfunctions<\/span> <\/span>App<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>const<\/span> <\/span>[<\/span>selectedUser<\/span>,<\/span> <\/span>setSelectedUser<\/span>]<\/span> <\/span>=<\/span> <\/span>useState<\/span>(<\/span>"<\/span>Jaime Cervantes<\/span>"<\/span>)<\/span>;<\/span><\/span>\n  <\/span>const<\/span> <\/span>users<\/span> <\/span>=<\/span> [<\/span>"<\/span>Jaime Cervantes<\/span>"<\/span>,<\/span> <\/span>"<\/span>Juan Perez<\/span>"<\/span>,<\/span> <\/span>"<\/span>Carlos Vazquez<\/span>"<\/span>]<\/span>;<\/span><\/span>\n  <\/span>console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>render App<\/span>'<\/span>)<\/span>;<\/span><\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <\/span><><\/span><\/span>\n      <\/span><<\/span>h1<\/span>><\/span>useMemo<\/span><\/<\/span>h1<\/span>><\/span><\/span>\n      <\/span><<\/span>p<\/span>><\/span>Usuario seleccionado: <\/span>{<\/span>selectedUser<\/span>}<\/<\/span>p<\/span>><\/span><\/span>\n      <\/span><<\/span>UserList<\/span> <\/span>users<\/span>={<\/span>users<\/span>}><\/<\/span>UserList<\/span>><\/span><\/span>\n      <\/span><<\/span>button<\/span> <\/span>onClick<\/span>={()<\/span> <\/span>=><\/span> <\/span>setSelectedUser<\/span>(<\/span>"<\/span>Pedro Picapiedra<\/span>"<\/span>)<\/span>}><\/span><\/span>\n        Cambiar usuario<\/span><\/span>\n      <\/span><\/<\/span>button<\/span>><\/span><\/span>\n    <\/span><\/><\/span><\/span>\n  )<\/span>;<\/span><\/span>\n}<\/span><\/span>\nexport<\/span> <\/span>default<\/span> App<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Y el componente <UserList<\/code>><\/strong>.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
import<\/span> <\/span>{<\/span> <\/span>useEffect<\/span> <\/span>}<\/span> <\/span>from<\/span> <\/span>"<\/span>react<\/span>"<\/span>;<\/span><\/span>\nexport<\/span> <\/span>default<\/span> <\/span>functions<\/span> <\/span>UserList<\/span>({<\/span> <\/span>users<\/span> <\/span>})<\/span> <\/span>{<\/span><\/span>\n  <\/span>console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>render UserList<\/span>'<\/span>)<\/span>;<\/span><\/span>\n  <\/span>useEffect<\/span>(<\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n    <\/span>console<\/span>.<\/span>log<\/span>(<\/span>'<\/span>useEffect UserList<\/span>'<\/span>)<\/span>;<\/span><\/span>\n  <\/span>},<\/span> [<\/span>users<\/span>])<\/span><\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <\/span><<\/span>ul<\/span>><\/span><\/span>\n      <\/span>{<\/span><\/span>\n        users<\/span>.<\/span>map<\/span>(<\/span>name<\/span> <\/span>=><\/span> (<\/span><\/span>\n          <\/span><<\/span>li<\/span> <\/span>key<\/span>={<\/span>name<\/span>}><\/span><\/span>\n            <\/span>{<\/span>name<\/span>}<\/span><\/span>\n          <\/span><\/<\/span>li<\/span>><\/span><\/span>\n        ))<\/span><\/span>\n      <\/span>}<\/span><\/span>\n    <\/span><\/<\/span>ul<\/span>><\/span><\/span>\n  )<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
En el primer render, los console.log<\/code> <\/strong>se ejecutan como sigue.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
render App<\/span><\/span>\nrender UserList<\/span><\/span>\nuseEffect UserList<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Cuando se cambia el estado de selectedUser<\/strong><\/code> provoca otro renderizado de <App><\/strong><\/code> y por consiguiente la asignaci\u00f3n de la constante users<\/code><\/strong> se vuelve a ejecutar. Dado que se cambi\u00f3 el estado tambi\u00e9n se vuelve a renderizar <UserList><\/code><\/strong>, hasta ah\u00ed no hay problema porque es lo que se espera. El problema es que se vuelve a ejecutar el useEffect<\/code><\/strong> in <UserList><\/code><\/strong> debido a que la constante users<\/code><\/strong> contiene un nuevo array.<\/p>\n\n\n\n
En segundo renderizado por cambio de selectedUser.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
render App<\/span><\/span>\nrender UserList<\/span><\/span>\nuseEffect UserList<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
useMemo<\/code> para users<\/code><\/h3>\n\n\n\n
Lo ideal es que el useEffect<\/code><\/strong> no se vuelva a ejecutar, porque los valores de los usuarios en realidad no cambiaron. Aqu\u00ed es donde useMemo<\/code><\/strong> tiene utilidad conservando la referencia del valor anterior.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
 <\/span>const<\/span> users <\/span>=<\/span> <\/span>useMemo<\/span>(<\/span><\/span>\n    <\/span>()<\/span> <\/span>=><\/span> [<\/span>"<\/span>Jaime Cervantes<\/span>"<\/span>,<\/span> <\/span>"<\/span>Juan Perez<\/span>"<\/span>,<\/span> <\/span>"<\/span>Carlos Vazquez<\/span>"<\/span>]<\/span>,<\/span><\/span>\n    []<\/span><\/span>\n )<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
De esta manera cuando cambiamos a selectedUser<\/code><\/strong>, nuestro useEffect<\/code><\/strong> ya no se ejecuta porque se sigue usando el mismo arreglo definido en App<\/strong><\/code> y no se vuelve a asignar uno nuevo gracias a useMemo<\/strong><\/code>.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
render App<\/span><\/span>\nrender UserList<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Usando React.memo<\/code> about <UserList><\/code><\/h3>\n\n\n\n
Podemos optimizar UserList<\/code><\/strong> a\u00fan m\u00e1s, convirti\u00e9ndolo en un HOC usando la funci\u00f3n React.memo<\/strong><\/code>.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
import<\/span> <\/span>{<\/span> <\/span>useEffect<\/span>,<\/span> <\/span>memo<\/span> <\/span>}<\/span> <\/span>from<\/span> <\/span>"<\/span>react<\/span>"<\/span>;<\/span><\/span>\nconst<\/span> UserListMemo <\/span>=<\/span> <\/span>memo<\/span>(UserList)<\/span>;<\/span><\/span>\nexport<\/span> <\/span>default<\/span> UserListMemo<\/span>;<\/span><\/span>\nfunctions<\/span> <\/span>UserList<\/span>({<\/span> <\/span>users<\/span> <\/span>})<\/span> <\/span>{<\/span><\/span>\n  <\/span>console<\/span>.<\/span>log<\/span>(<\/span>"<\/span>render UserList<\/span>"<\/span>)<\/span>;<\/span><\/span>\n  <\/span>useEffect<\/span>(<\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n    <\/span>console<\/span>.<\/span>log<\/span>(<\/span>"<\/span>useEffect UserList<\/span>"<\/span>)<\/span>;<\/span><\/span>\n  <\/span>},<\/span> [<\/span>users<\/span>])<\/span>;<\/span><\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <\/span><<\/span>ul<\/span>><\/span><\/span>\n      <\/span>{<\/span>users<\/span>.<\/span>map<\/span>(<\/span>(<\/span>name<\/span>)<\/span> <\/span>=><\/span> (<\/span><\/span>\n        <\/span><<\/span>li<\/span> <\/span>key<\/span>={<\/span>name<\/span>}><\/span><\/span>\n          <\/span>{<\/span>name<\/span>}<\/span><\/span>\n        <\/span><\/<\/span>li<\/span>><\/span><\/span>\n      ))<\/span>}<\/span><\/span>\n    <\/span><\/<\/span>ul<\/span>><\/span><\/span>\n  )<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Usando React.memo<\/code><\/strong>, cuando se presiona el bot\u00f3n para cambiar el userSelected<\/code><\/strong>, ya no se renderiza <UserList><\/code><\/strong>. Ahora en la consola solo imprime render App<\/code>.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
render App<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Imag\u00ednate que users<\/code><\/strong> debiera recibir un arreglo con mil usuarios. Vale la pena hacer memoization de esos datos para evitar volver a renderizar <UserList><\/code><\/strong> con mil elementos <li><\/code><\/strong> que representen a cada usuario. Solo es un ejemplo, no es que en aplicaciones reales quieras obtener mil usuarios de una sola vez, para eso est\u00e1n las paginaciones.<\/p>\n\n\n\n
Agregando selectUser<\/code><\/h3>\n\n\n\n
El componente UserList<\/code><\/strong> necesita establecer el usuario seleccionado. Agregamos una funci\u00f3n llamada selectUser<\/code><\/strong> que use setUserSelected<\/strong><\/code> para actualizar el usuario seleccionado.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
import<\/span> <\/span>{<\/span> <\/span>useState<\/span>,<\/span> <\/span>useMemo<\/span> <\/span>}<\/span> <\/span>from<\/span> <\/span>"<\/span>react<\/span>"<\/span>;<\/span><\/span>\nimport<\/span> UserList <\/span>from<\/span> <\/span>"<\/span>.\/components\/UserList<\/span>"<\/span>;<\/span><\/span>\nfunctions<\/span> <\/span>App<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>const<\/span> <\/span>[<\/span>selectedUser<\/span>,<\/span> <\/span>setSelectedUser<\/span>]<\/span> <\/span>=<\/span> <\/span>useState<\/span>(<\/span>"<\/span>Jaime Cervantes<\/span>"<\/span>)<\/span>;<\/span><\/span>\n  <\/span>const<\/span> <\/span>users<\/span> <\/span>=<\/span> <\/span>useMemo<\/span>(<\/span><\/span>\n    <\/span>()<\/span> <\/span>=><\/span> [<\/span>"<\/span>Jaime Cervantes<\/span>"<\/span>,<\/span> <\/span>"<\/span>Juan Perez<\/span>"<\/span>,<\/span> <\/span>"<\/span>Carlos Vazquez<\/span>"<\/span>]<\/span>,<\/span><\/span>\n    []<\/span><\/span>\n  )<\/span>;<\/span><\/span>\n  <\/span>console<\/span>.<\/span>log<\/span>(<\/span>"<\/span>render App<\/span>"<\/span>)<\/span>;<\/span><\/span>\n  <\/span>const<\/span> <\/span>selectUser<\/span> <\/span>=<\/span> <\/span>(<\/span>user<\/span>)<\/span> <\/span>=><\/span> <\/span>setSelectedUser<\/span>(<\/span>user<\/span>)<\/span>;<\/span><\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <\/span><><\/span><\/span>\n      <\/span><<\/span>h1<\/span>><\/span>useMemo<\/span><\/<\/span>h1<\/span>><\/span><\/span>\n      <\/span><<\/span>p<\/span>><\/span>Usuario seleccionado: <\/span>{<\/span>selectedUser<\/span>}<\/<\/span>p<\/span>><\/span><\/span>\n      <\/span><<\/span>UserList<\/span> <\/span>users<\/span>={<\/span>users<\/span>} <\/span>onSelectUser<\/span>={<\/span>selectUser<\/span>}><\/<\/span>UserList<\/span>><\/span><\/span>\n    <\/span><\/><\/span><\/span>\n  )<\/span>;<\/span><\/span>\n}<\/span><\/span>\nexport<\/span> <\/span>default<\/span> App<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Y en <UserList><\/code><\/strong> tenemos lo siguiente.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
import<\/span> <\/span>{<\/span> <\/span>useEffect<\/span>,<\/span> <\/span>memo<\/span> <\/span>}<\/span> <\/span>from<\/span> <\/span>"<\/span>react<\/span>"<\/span>;<\/span><\/span>\nconst<\/span> UserListMemo <\/span>=<\/span> <\/span>memo<\/span>(UserList)<\/span>;<\/span><\/span>\nexport<\/span> <\/span>default<\/span> UserListMemo<\/span>;<\/span><\/span>\nfunctions<\/span> <\/span>UserList<\/span>({<\/span> <\/span>users<\/span>,<\/span> <\/span>onSelectUser<\/span> <\/span>})<\/span> <\/span>{<\/span><\/span>\n  <\/span>console<\/span>.<\/span>log<\/span>(<\/span>"<\/span>render UserList<\/span>"<\/span>)<\/span>;<\/span><\/span>\n  <\/span>useEffect<\/span>(<\/span>()<\/span> <\/span>=><\/span> <\/span>{<\/span><\/span>\n    <\/span>console<\/span>.<\/span>log<\/span>(<\/span>"<\/span>useEffect UserList<\/span>"<\/span>)<\/span>;<\/span><\/span>\n  <\/span>},<\/span> [<\/span>users<\/span>])<\/span>;<\/span><\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <\/span><<\/span>ul<\/span>><\/span><\/span>\n      <\/span>{<\/span>users<\/span>.<\/span>map<\/span>(<\/span>(<\/span>name<\/span>)<\/span> <\/span>=><\/span> (<\/span><\/span>\n        <\/span><<\/span>li<\/span> <\/span>key<\/span>={<\/span>name<\/span>} <\/span>onClick<\/span>={(<\/span>and<\/span>)<\/span> <\/span>=><\/span> <\/span>onSelectUser<\/span>(name)<\/span>}><\/span><\/span>\n          <\/span>{<\/span>name<\/span>}<\/span><\/span>\n        <\/span><\/<\/span>li<\/span>><\/span><\/span>\n      ))<\/span>}<\/span><\/span>\n    <\/span><\/<\/span>ul<\/span>><\/span><\/span>\n  )<\/span>;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Ahora ya no tenemos problemas con la constante users<\/code><\/strong> gracias a useMemo<\/code><\/strong> y hasta evitamos el renderizado de <UserList><\/strong><\/code> con React.memo<\/strong><\/code>. <\/p>\n\n\n\n
useMemo para selectUser<\/code><\/h3>\n\n\n\n
Pero acabamos de agregar una funci\u00f3n para actualizar el usuario seleccionado, cada vez que cambiamos el estado de selectedUser<\/code><\/strong>, la funci\u00f3n se vuelve a crear y al ser una nueva referencia en memoria, entonces la propiedad onSelectUser<\/code><\/strong> of <UserList> <\/code><\/strong>cambia, por lo que si se renderiza este componente.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
render App<\/span><\/span>\nrender UserList<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Para evitar el tema anterior tambi\u00e9n nos sirve useMemo<\/code><\/strong>, al permitirnos guardar un valor de cualquier tipo, tambi\u00e9n podemos guardar una funci\u00f3n, mientras alguna de las dependencias no cambie, la referencia a la funci\u00f3n seguir\u00e1 siendo la misma entre renderizados.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
import<\/span> <\/span>{<\/span> <\/span>useState<\/span>,<\/span> <\/span>useMemo<\/span> <\/span>}<\/span> <\/span>from<\/span> <\/span>"<\/span>react<\/span>"<\/span>;<\/span><\/span>\nimport<\/span> UserList <\/span>from<\/span> <\/span>"<\/span>.\/components\/UserList<\/span>"<\/span>;<\/span><\/span>\nfunctions<\/span> <\/span>App<\/span>()<\/span> <\/span>{<\/span><\/span>\n  <\/span>const<\/span> <\/span>[<\/span>selectedUser<\/span>,<\/span> <\/span>setSelectedUser<\/span>]<\/span> <\/span>=<\/span> <\/span>useState<\/span>(<\/span>"<\/span>Jaime Cervantes<\/span>"<\/span>)<\/span>;<\/span><\/span>\n  <\/span>const<\/span> <\/span>users<\/span> <\/span>=<\/span> <\/span>useMemo<\/span>(<\/span><\/span>\n    <\/span>()<\/span> <\/span>=><\/span> [<\/span>"<\/span>Jaime Cervantes<\/span>"<\/span>,<\/span> <\/span>"<\/span>Juan Perez<\/span>"<\/span>,<\/span> <\/span>"<\/span>Carlos Vazquez<\/span>"<\/span>]<\/span>,<\/span><\/span>\n    []<\/span><\/span>\n  )<\/span>;<\/span><\/span>\n  <\/span>console<\/span>.<\/span>log<\/span>(<\/span>"<\/span>render App<\/span>"<\/span>)<\/span>;<\/span><\/span>\n  <\/span>const<\/span> <\/span>selectUser<\/span> <\/span>=<\/span> <\/span>(<\/span>user<\/span>)<\/span> <\/span>=><\/span> <\/span>setSelectedUser<\/span>(<\/span>user<\/span>)<\/span>;<\/span><\/span>\n  <\/span>const<\/span> <\/span>memoizedSelectUser<\/span> <\/span>=<\/span> <\/span>useMemo<\/span>(<\/span>()<\/span> <\/span>=><\/span> <\/span>selectUser<\/span>,<\/span> [])<\/span>;<\/span><\/span>\n  <\/span>return<\/span> (<\/span><\/span>\n    <\/span><><\/span><\/span>\n      <\/span><<\/span>h1<\/span>><\/span>useMemo<\/span><\/<\/span>h1<\/span>><\/span><\/span>\n      <\/span><<\/span>p<\/span>><\/span>Usuario seleccionado: <\/span>{<\/span>selectedUser<\/span>}<\/<\/span>p<\/span>><\/span><\/span>\n      <\/span><<\/span>UserList<\/span> <\/span>users<\/span>={<\/span>users<\/span>} <\/span>onSelectUser<\/span>={<\/span>memoizedSelectUser<\/span>}><\/<\/span>UserList<\/span>><\/span><\/span>\n    <\/span><\/><\/span><\/span>\n  )<\/span>;<\/span><\/span>\n}<\/span><\/span>\nexport<\/span> <\/span>default<\/span> App<\/span>;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Cuando cambiemos el estado de selectedUser<\/code><\/strong>, en la consola solo imprimir\u00e1 lo siguiente.<\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
render App<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Puedes ver el c\u00f3digo final aqu\u00ed.<\/a><\/p>\n\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
<<\/span>to<\/span> <\/span>href<\/span>=<\/span>"<\/span>https:\/\/codesandbox.io\/s\/userlist-con-usememo-ehqrx?fontsize=14&hidenavigation=1&theme=dark<\/span>"<\/span>><\/span><\/span>\n  <\/span><<\/span>img<\/span> <\/span>alt<\/span>=<\/span>"<\/span>Edit UserList con useMemo<\/span>"<\/span> <\/span>src<\/span>=<\/span>"<\/span>https:\/\/codesandbox.io\/static\/img\/play-codesandbox.svg<\/span>"<\/span>><\/span><\/span>\n<\/<\/span>to<\/span>><\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Puntos importantes del c\u00f3digo final<\/h3>\n\n\n\n