隆Bienvenida! Este es un curso especial de React Hooks

1

驴Qu茅 aprender谩s en el Curso Profesional de React Hooks?

2

驴Qu茅 son los React Hooks y c贸mo cambian el desarrollo con React?

Introducci贸n a React Hooks

3

useState: estado en componentes creados como funciones

4

useEffect: olvida el ciclo de vida, ahora piensa en efectos

5

useContext: la fusi贸n de React Hooks y React Context

6

useReducer: como useState, pero m谩s escalable

7

驴Qu茅 es memoization? Programaci贸n funcional en JavaScript

8

useMemo: evita c谩lculos innecesarios en componentes

9

useRef: manejo profesional de inputs y formularios

10

useCallback: evita c谩lculos innecesarios en funciones

11

Optimizaci贸n de componentes en React con React.memo

12

Custom hooks: abstracci贸n en la l贸gica de tus componentes

13

Third Party Custom Hooks de Redux y React Router

Configura un entorno de desarrollo profesional

14

Proyecto: an谩lisis y retos de Platzi Conf Store

15

Instalaci贸n de Webpack y Babel: presets, plugins y loaders

16

Configuraci贸n de Webpack 5 y webpack-dev-server

17

Configuraci贸n de Webpack 5 con loaders y estilos

18

Loaders de Webpack para Preprocesadores CSS

19

Flujo de desarrollo seguro y consistente con ESLint y Prettier

20

Git Hooks con Husky

Estructura y creaci贸n de componentes para Platzi Conf Store

21

Arquitectura de vistas y componentes con React Router DOM

22

Maquetaci贸n y estilos del home

23

Maquetaci贸n y estilos de la lista de productos

24

Maquetaci贸n y estilos del formulario de checkout

25

Maquetaci贸n y estilos de la informaci贸n del usuario

26

Maquetaci贸n y estilos del flujo de pago

27

Integraci贸n de 铆conos y conexi贸n con React Router

Integraci贸n de React Hooks en Platzi Conf Merch

28

Creando nuestro primer custom hook

29

Implementando useContext en Platzi Conf Merch

30

useContext en la p谩gina de checkout

31

useRef en la p谩gina de checkout

32

Integrando third party custom hooks en Platzi Conf Merch

Configura mapas y pagos con PayPal y Google Maps

33

Paso a paso para conectar tu aplicaci贸n con la API de PayPal

34

Integraci贸n de pagos con la API de PayPal

35

Completando la integraci贸n de pagos con la API de PayPal

36

Paso a paso para conectar tu aplicaci贸n con la API de Google Maps

37

Integraci贸n de Google Maps en el mapa de checkout

38

Creando un Custom Hook para Google Maps

Estrategias de deployment profesional

39

Continuous integration y continuous delivery con GitHub Actions

40

Compra del dominio y despliega con Cloudflare

Optimizaci贸n de aplicaciones web con React

41

Integraci贸n de React Helmet para mejorar el SEO con meta etiquetas

42

An谩lisis de performance con Google Lighthouse

43

Convierte tu aplicaci贸n de React en PWA

Bonus: trabaja con Strapi CMS para crear tu propia API

44

Crea una API con Strapi CMS y cons煤mela con React.js

驴Qu茅 sigue en tu carrera profesional?

45

Pr贸ximos pasos para especializarte en frontend

Optimizaci贸n de componentes en React con React.memo

11/45

Lectura

驴En qu茅 piensas cuando debes 鈥渙ptimizar un componente鈥 de tu aplicaci贸n en React.js? Anota tu respuesta antes de leer esta clase para un an谩lisis personal m谩s adelante.

驴Qu茅 significa optimizaci贸n en React?

No existe una sola forma de optimizar componentes. Hay much铆simas formas de crear componentes y a煤n as铆 podemos mostrar el 鈥渕ismo鈥 resultado en pantalla. Pero la forma en que lo hacemos puede afectar notoriamente el rendimiento del proyecto para nuestros usuarios.

Optimizar no es una sola t茅cnica o f贸rmula secreta. Optimizar significa analizar los componentes de nuestro proyecto para mejorar el tiempo que tardamos en ejecutar cierto proceso o identificar procesos que estamos ejecutando en momentos innecesarios y le cuestan trabajo a la aplicaci贸n.

En esta lectura vamos a utilizar 2 herramientas oficiales de React para optimizar nuestros componentes. Pero 驴para qu茅 tipo de optimizaci贸n podemos utilizarlas? Vamos a evitar que nuestros componentes se rendericen innecesariamente.

React.memo vs. React.PureComponent

Vamos a evitar renders innecesarios causados por un mal manejo de las props.

驴C贸mo funciona PureComponent?

PureComponent es una clase de React muy similar a React.Component, pero por defecto el m茅todo shouldComponentUpdate compara las props nuevas y viejas, si no han cambiado, evita volver a llamar el m茅todo render del componente. Esta comparaci贸n se llama Shallow Comparison.

Esta lectura te ayudar谩 si quieres profundizar en c贸mo funcionan los objetos en JavaScript y por qu茅 es necesario implementar shallow comparison en vez de una comparaci贸n 鈥渘ormal鈥: Aprende a Copiar Objetos en JavaScript sin morir en el intento.

驴Cu谩ndo debo usar React.PureComponent?

En este ejemplo pr谩ctico crearemos 3 componentes, un pap谩 y dos hijos. El componente padre tiene un estado con dos elementos, count y canEdit. El padre tiene dos funciones que actualizan cada elemento del estado. Y cada elemento del estado se env铆a a un componente hijo diferente.

Componente padre (App):

class App extends React.Component {
  constructor(props) {
      super(props);

      this.state = { count: 1, canEdit: true };
    }
    
    render() {
        console.log("Render App");

        const toggleCanEdit = () => {
            console.log("Click al bot贸n de toggleCanEdit");
            this.setState(({ canEdit: oldCanEdit }) => {
              return { canEdit: !oldCanEdit };
            });
        };

        const countPlusPlus = () => {
          console.log("Click al bot贸n de counter");
          this.setState((prevState) => {
            return { count: prevState.count + 1 };
          });
        };

        return (
            <>
              <button onClick={countPlusPlus}>Counter +1</button>
              <Counter count={this.state.count} />

              <button onClick={toggleCanEdit}>Toggle Can Edit</button>
              <Permissions canEdit={this.state.canEdit} />
            </>
        );
    }
}

Componente hijo (counter):

class Counter extends React.Component {
    render() {
        console.log("Render Counter")
        const { count } = this.props;
 
        return (
            <form>
                <p>Counter: {count}</p>
            </form>
        );
    }
}

Componente hijo (permisos):

class Permissions extends React.Component {
    render() {
        console.log("Render Permissions")
        const { canEdit } = this.props;
 
        return (
            <form>
                <p>El usuario {canEdit ? "" : "no"} tiene permisos de editar...</p>
            </form>
        );
    }
}

Si pruebas este c贸digo en el navegador, podr谩s darte cuenta de que, sin importar en qu茅 bot贸n demos clic, todos los componentes se vuelven a renderizar.

React PureComponent

Este error puede ser muy grave. La prop canEdit no tiene ninguna conexi贸n con el componente Counter ni la prop count con el componente Permissions, pero, a煤n as铆, si cualquiera de las dos cambia, los 3 componentes se vuelven a renderizar.

Afortunadamente podemos arreglarlo/optimizarlo cambiando React.Component por React.PureComponent.

class App extends React.PureComponent { /* 鈥 */ }
class Counter extends React.PureComponent { /* 鈥 */ }
class Permissions extends React.PureComponent { /* 鈥 */ }
React.PureComponent

驴C贸mo funciona y cu谩ndo debo usar React.memo?

Si useEffect es el 鈥渞eemplazo鈥 del ciclo de vida en componentes creados como funciones con React Hooks, React.memo es el 鈥渞eemplazo鈥 de PureComponent.

Convirtamos el ejemplo anterior a funciones con React Hooks:

const App = function() {
  console.log("Render App");

  const [count, setCount] = React.useState(1);
  const [canEdit, setCanEdit] = React.useState(true);

  const countPlusPlus = () => {
    console.log("Click al bot贸n de counter");
    setCount(count + 1);
  };

  const toggleCanEdit = () => {
      console.log("Click al bot贸n de toggleCanEdit");
      setCanEdit(!canEdit);
  };

  return (
    <>
      <button onClick={countPlusPlus}>Counter +1</button>
      <Counter count={count} />

      <button onClick={toggleCanEdit}>Toggle Can Edit</button>
      <Permissions canEdit={canEdit} />
    </>
  );
}

const Permissions = function({ canEdit }) {
  console.log("Render Permissions")

  return (
      <form>
          <p>Can Edit es {canEdit ? "verdadero" : "falso"}</p>
      </form>
  );
}

const Counter = function({ count }) {
  console.log("Render Counter")

  return (
      <form>
          <p>Counter: {count}</p>
      </form>
  );
}

El resultado va a ser exactamente igual que al usar React.Component.

React PureComponent

Ahora usemos React.memo para que nuestro componente no se renderice si las props que recibe siguen igual que en el render anterior.

const App = React.memo(function() {
    /* 鈥 */
});

const Permissions = React.memo(function({ canEdit }) {
    /* 鈥 */
});

const Counter = React.memo(function({ count }) {
    /* 鈥 */
});
React.PureComponent

驴C贸mo crear una comparaci贸n personalizada con React.memo o shouldComponentUpdate?

En algunos casos puede que no necesitemos shallow comparison, sino una comparaci贸n o validaci贸n personalizada. En estos casos lo 煤nico que debemos hacer es reescribir el m茅todo shouldComponentUpdate o enviar un segundo argumento a React.memo (casi siempre incluimos los keywords are equal al nombre de esta funci贸n).

Esta nueva comparaci贸n la necesitaremos, por ejemplo, cuando nuestro componente recibe varias props, pero solo necesita su valor inicial, es decir, sin importar si cambian, a nuestro componente le da igual y solo utilizar谩 la primera versi贸n de las props.

// Con clases
class Permissions extends React.Component {
    shouldComponentUpdate(nextProps, nextState) {
        return false;
    }

    render() {
        /* 鈥 */
    }
}

// Con hooks
function memoStopIfPropsAreEqualOrNot(oldProps, newProps) {
  return true;
}

const Permissions = React.memo(function({ canEdit }) {
    /* 鈥 */
}, memoStopIfPropsAreEqualOrNot);

En este caso evitamos que nuestro componente se actualice sin importar si cambian nuestras props. Pero 驴qu茅 tal si s铆 debemos volver a renderizar cuando cambia alguna de nuestras props?

// Con clases
class Permissions extends React.Component {
    shouldComponentUpdate(nextProps, nextState) {
        if (this.props.input.value !== nextProps.input.value) {
            return true;
        } else {
            return false;
        }
    }
}

// Con hooks
function memoIsInputEqual(oldProps, newProps) {
    if (oldProps.input.value !== newProps.input.value) {
        return false;
    } else {
        return true;
    }
}

const Permissions = React.memo(function({ canEdit }) {
    /* 鈥 */
}, memoIsInputEqual);

Recuerda que la funci贸n shouldComponentUpdate debe devolver true si queremos que nuestro componente se vuelva a renderizar. En cambio, la funci贸n de evaluaci贸n de React.memo debe devolver false si nuestras props son diferentes y, por ende, queremos permitir un nuevo render.


Ahora que conoces los casos de uso para React.memo y React.PureComponent para evitar renders innecesarios de tus componentes en React鈥 驴En qu茅 piensas cuando debes 鈥渙ptimizar un componente鈥 en tu aplicaci贸n con React.js?

Antes de seguir a la siguiente clase cu茅ntame en los comentarios c贸mo cambi贸 tu perspectiva y definici贸n mental sobre la optimizaci贸n de componentes en React.

Aportes 28

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Aunque esto suene voy hermoso y quieras aplicar React.memo a todos tus componentes tambi茅n puede generarte problemas de rendimiento, para entenderlo de una forma f谩cil imaginalo como un supervisor que tiene que estar checando si se renderiza o no tiene que checar las props y todo eso. Es un filtro que en vez de ayudar puede perjudicar la aplicaci贸n.
La reocmendaci贸n lo mismo que el autor marca, solo usarlo cuando veas que el componente no va a tener actualizaciones.

驴En qu茅 piensas cuando debes 鈥渙ptimizar un componente鈥 de tu aplicaci贸n en React.js?
Respuesta: Evitar renders innecesarios.

En los ejemplos de 茅ste art铆culo hay un detalle con el m茅todo shouldComponentUpdate, b谩sicamente los par谩metros que recibe 茅sta funci贸n son nextProps y nextState (nuevasProps, nuevoEstado) NO prevProps y newProps, en el ejemplo el nombre colocado y la comparaci贸n est谩n err贸neos. Lo comento por si alguno se dio cuenta o si tratan de implementarlo tal cual, no les funcionar铆a.

Doc de shouldComponentUpdate -> https://reactjs.org/docs/react-component.html#shouldcomponentupdate

Existen patrones de dise帽o para React o algo que nos ayude a pensar desde un principio la aplicaci贸n optimizada?

Hace poco, hice un proyecto donde tenia que crea un modal para realizar el CRUD de datos. Y no sabia por que era tan pesado cada vez que alteraba alg煤n estado. Ahora me pongo a pensar q cada vez renderizaba el modal con todos sus componentes a cada rato. Creo q ya tengo donde empezar a optimizar.

Evitar renderizados innecesarios a favor del cliente y del performance de la app.

Empezar a aplicar esto creo que ser谩 un avance muy grande en mi progreso profesional, ya que vi y trabaje en proyectos donde esto no se tomaba en cuenta, mas ahora podr茅 empezar a trabajar para optimizarlos al m谩ximo.

Uff optimiza un monton, React.memo debe ser como un standar al usar componentes padres con diferentes estados e hijos

驴En qu茅 piensas cuando debes 鈥渙ptimizar un componente鈥 de tu aplicaci贸n en React.js?
Respuesta: Para evitar que la aplicaci贸n se vuelva lenta, y que sea m谩s f谩cil de modificar ese componente en el futuro

Bastante practico

Me gusta que nos den este punto de un 鈥渁lgo鈥 especifico que debemos tener en cuenta para poder hacer nuestros desarrollos lo mejor posible, ya que realmente son cosas que no se aprenden de otra forma.
Estar铆a genial agregar este tema en un foro de react en Platzi!!

Optimizar un componente (antes de leer la clase): Evitar consumo de memoria, separar en componentes a煤n m谩s peque帽os para que se entienda mejor el c贸digo

驴En qu茅 piensas cuando debes 鈥渙ptimizar un componente鈥 de tu aplicaci贸n en React.js?. R/
hacerlo mas simple de entender y poder dejarlo funcional para que se adapte a diferentes componentes.

Evitar ejecuc铆ones no deseadas de funciones.

Optimizar un componente para mi es normalizar datos, refactorizar, dividir un componente presentacional a otro que tiene la logica.

Hasta el momento cuando escucho optimizar un componente pienso en evitar procedimientos que no sean necesarios, como no hacer la misma b煤squeda dos veces, o no hacer render de un componente hijo, al menos de que sea modificado. Esto ayuda a ahorrar memoria y hacer c谩lculos m谩s r谩pidos.

Increibleeeeeeee 馃槃 !! Cambio muchisimo

al principio pens茅 que eran diferentes por el 鈥榲s鈥, pues son los mismos, solamente para distintos casos como son los componentes stateful y stateless

Me gustar铆a leer en el c贸digo fuente de React las partes en donde se implementa la 鈥渞eactividad鈥 para entender m谩s a fondo c贸mo funciona la librer铆a y el concepto de 鈥渞eactividad鈥 como tal 馃

Genial

驴En qu茅 piensas cuando debes 鈥渙ptimizar un componente鈥 en tu aplicaci贸n con React.js?

Pienso en q no se debe hacer renders innecesarios

Optimizar un componente lo relaciono a escribir menos l铆neas de c贸digo.

La verdad este documento es sencillamente brutal! Que genial. Muchas gracias Juan por detallar y ejemplificar de esta forma el contenido.

Thanks #TeamPlatzi 馃槑

Excelente aporte 馃憦馃徎

Visualmente para el usuario, 驴Esto es notorio.?

Gracias.

Gracias por la clase, esto me recuerda siempre tener presente lo importante de la optimizaci贸n dentro de nuestros proyectos!

Ooooooorale, esto me ayudar谩 bastante en mis proyectos, Gracias 馃挌