No olvides React Memo

Hagamos algunas interacciones. ¿Dónde está el ruido? Sí. Entonces, ¿alguna vez... bien. ¿Ya han visto React Conf 2021? Por favor, levanten las manos. Oh, muy pocos. De acuerdo, solo un vistazo rápido. Tiene un nuevo compilador llamado React memo, que se supone que inyecta automáticamente React memo, use callback, use memo en su código. Suena realmente fascinante, pero desafortunadamente, todavía está en modo de desarrollo y no tengo idea de cuándo estará disponible en un futuro cercano. Así que volvamos a nuestra vida diaria y me doy cuenta de que todavía hay una brecha en la comprensión de cómo funcionan use memo y use callback. Los estamos usando en exceso. ¿Pero qué es esa memorización? Y la pregunta más difícil ahora es ¿cómo podemos descubrir las mejores prácticas? Permítanme presentarme. Mi nombre es Kristina. Soy ingeniera de software en SoftSurf. Y hoy voy a hablar de eso en detalle. Así que cuando veo este tipo de problemas, soy una persona matemática. De fondo, simplemente hago cosas simples. Lo simplifico o lo apruebo. Y la mejor manera de descubrirlo es olvidarse de use memo y escribir su propio custom hook. Así que vamos a construir un hook desde cero. ¿Qué necesitamos hacer? Primero, debemos devolver un objeto JavaScript plano. Su valor se puede acceder y modificar y no debemos olvidar que debe persistir. Necesito un objeto en lugar de crear uno nuevo en las renderizaciones posteriores. Así que uso useState para implementar esto y su valor de retorno es un array y el índice 0 es el valor actual. Si ya he comenzado a usar hooks como useState, ¿por qué no puedo reemplazarlo por useRef? Puedo hacer esto y hace lo mismo y es más legible. Entonces, ¿qué otra cosa debemos agregar a nuestra función? Se actualiza una y otra vez pero no lo necesitamos. Y nos puede ayudar a hacer una comparación superficial como lo hace en React. Así que, envolviendo todas nuestras ideas, creo mi propia función use memo con valor para el valor actual y el

anterior. Luego invoco shallow equals donde comienzo a verificar si es un array por su longitud y finalmente lo verifico para ver si sus elementos son nuevos para nosotros. Si todo está bien, devuelve true y luego lo anulamos y devolvemos un valor, por lo que podemos modificar el objeto no solo mediante use ref. Lo que me resultó interesante es que use memo es muy similar a use ref, pero la única diferencia es que tiene una condición adicional y surge otra pregunta que si use callback es equivalente a use memo y ahora no es un secreto y podemos entender por qué. Así que espero que después de esta charla, al mirar un tweet o mirar la react documentation, no sean solo palabras para ustedes. También tienen un conocimiento profundo mediante pruebas. ¡Hurra! Y ahora solo quiero tomar una parte adicional y compartir mi conocimiento sobre cómo uso use callback y use memo. El primero es cuando tienes un componente padre y un componente hijo. Si en el componente padre usas use callback, te recomiendo encarecidamente envolver el componente hijo con React Memo para evitar que se vuelva a renderizar. Y el siguiente es cuando quieres crear tu propio componente Howk con dependencias. También te recomiendo envolverlo con use callback. Si no lo haces, ¡no te preocupes! Sí, el complemento Howk te llamará de vuelta. Y otro ejemplo de uso de use memo. Es bastante simple para optimizar cálculos costosos como filtrado, ordenamiento y formateo. Y un gran ejemplo es la tabla de React.

Y la última diapositiva está dedicada a mi país. Todavía necesitamos apoyo. Todavía necesitamos algunas donaciones y municiones. Aquí puedes encontrar más información y no dudes en hacerle preguntas a un ucraniano. Y aquí, si quieres encontrarme en Google, en Google, solo tienes que escribir mi apodo y te llevará a mi Twitter y Github. Estaré muy agradecida si te unes a mí. Muchas gracias.