Los desarrolladores de React nos intrigan con el llamado compilador React Forget [que se supone que inyecta useMemo y useCallback automáticamente en el código]. Sin embargo, todavía no podemos entender las mejores prácticas para useCallback, useMemo y React.memo cuando lo escribimos por nuestra cuenta. El peor escenario es si seguimos colocándolo en todas partes sin entenderlo. Como resultado, puede causar un daño notable al rendimiento de nuestra aplicación. En esta charla, en casos de uso reales, verás soluciones al problema de usar hooks de manera incorrecta o abusar de ellos.
Versión en Español
Video Summary and Transcription
La charla aborda temas como el compilador React Memo, use memo y use callback, la construcción de hooks personalizados y los beneficios de usar use ref. También explora las similitudes entre use memo y use ref, y el uso de React Memo para prevenir re-renderizaciones y optimizar cálculos costosos. El orador también comparte información personal y detalles de contacto.
Available in English
1. Introducción a React Memo y Custom Hooks
Short description:
Voy a hablar sobre el compilador de React memo, la brecha en la comprensión de cómo funcionan use memo y use callback, y las mejores prácticas. También discutiré la construcción de un custom hook y los beneficios de usar use ref en lugar de use state. Por último, presentaré mi propia función use memo con comparación superficial.
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
2. Explorando use Memo, use Callback y React Memo
Short description:
Discuto las similitudes entre use memo y use ref, y la condición adicional en use memo. También comparto mi conocimiento sobre el uso de use callback y use memo, como envolver componentes hijos con React Memo para evitar re-renderizaciones y crear componentes Howk con dependencias. Además, menciono el uso de use memo para optimizar cálculos costosos como filtrado y ordenamiento. Por último, dedico una diapositiva a mi país y proporciono información sobre cómo encontrarme en Google, Twitter y Github.
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.
