Memo

 Su uso memohará que React omita la representación de un componente si sus propiedades no han cambiado.

Esto puede mejorar el rendimiento.

Esta sección utiliza React Hooks. Consulta la sección React Hooks para obtener más información sobre Hooks.

Problema

En este ejemplo, el Todos componente se vuelve a renderizar incluso cuando las tareas pendientes no han cambiado.

import { useState } from "react";
import ReactDOM from "react-dom/client";
import Todos from "./Todos";

const App = () => {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState(["todo 1", "todo 2"]);

  const increment = () => {
    setCount((c) => c + 1);
  };

  return (
    <>
      <Todos todos={todos} />
      <hr />
      <div>
        Count: {count}
        <button onClick={increment}>+</button>
      </div>
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Todos.js:

const Todos = ({ todos }) => {
  console.log("child render");
  return (
    <>
      <h2>My Todos</h2>
      {todos.map((todo, index) => {
        return <p key={index}>{todo}</p>;
      })}
    </>
  );
};

export default Todos;

Al hacer clic en el botón de incremento, el Todoscomponente se vuelve a renderizar.


Si este componente fuera complejo, podría causar problemas de rendimiento.

Solución

Para solucionar esto, podemos utilizar memo.

Úselo memopara evitar que el Todos componente se vuelva a renderizar innecesariamente.

Envuelva la Todos exportación del componente en memo:

index.js:

import { useState } from "react";
import ReactDOM from "react-dom/client";
import Todos from "./Todos";

const App = () => {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState(["todo 1", "todo 2"]);

  const increment = () => {
    setCount((c) => c + 1);
  };

  return (
    <>
      <Todos todos={todos} />
      <hr />
      <div>
        Count: {count}
        <button onClick={increment}>+</button>
      </div>
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);


Todos.js:

import { memo } from "react";

const Todos = ({ todos }) => {
  console.log("child render");
  return (
    <>
      <h2>My Todos</h2>
      {todos.map((todo, index) => {
        return <p key={index}>{todo}</p>;
      })}
    </>
  );
};

export default memo(Todos);

Ahora el Todoscomponente solo se vuelve a renderizar cuando todosse actualizan los valores que se le pasan a través de propiedades.

huggh

Comentarios

Publicar un comentario

Entradas populares de este blog

1-react-intro

React es una biblioteca JavaScript para construir interfaces de usuario. React se utiliza para construir aplicaciones de una sola página. React nos permite crear componentes de interfaz de usuario reutilizables. Es una libreria de javascript para crear interfaces de usuarios en una sola pagina index.html  Estructura react: import React from 'react' ; import ReactDOM from 'react-dom/client' ; function Hello ( props ) { return < h1 > Hello World! </ h1 > ; } const container = document . getElementById ( "root" ) ; const root = ReactDOM . createRoot ( container ) ; root . render ( < Hello /> ) ;   Crear aplicación de reacción Para aprender y probar React, debe configurar un entorno de reacción sobre tu computadora. Este tutorial utiliza la create-react-app. El create-react-app herramienta es una forma de apoyar oficialmente para crear aplicaciones de React. Node.js está obligado a utilizar create-react-app . Abra su term...
Leer más

condicional

En React, puedes renderizar componentes de forma condicional. Hay varias maneras de hacer esto. ifDeclaración Podemos utilizar el ifoperador JavaScript para decidir qué componente renderizar. Utilizaremos estos dos componentes: function MissedGoal ( ) { return < h1 > MISSED! </ h1 > ; } function MadeGoal ( ) { return < h1 > Goal! </ h1 > ; } Ejemplo: Ahora, crearemos otro componente que elige qué componente renderizar según una condición: function Goal ( props ) { const isGoal = props . isGoal ; if ( isGoal ) { return < MadeGoal /> ; } return < MissedGoal /> ; } const root = ReactDOM . createRoot ( document . getElementById ( 'root' ) ) ; root . render ( < Goal isGoal = { false } /> ) ; dfsdf Intente cambiar el isGoalatributo a true: const root = ReactDOM . createRoot ( document . getElementById ( 'root' ) ) ; root . render ( < Goal isGoal = { true } /> ) ; &&Op...
Leer más

useState

Imagen
En React, el estado es mucho más que solo un conjunto de datos; es la "memoria" interna del componente, que le permite " recordar " información y reaccionar a los cambios de forma automática. Veamos más en profundidad por qué es necesario rastrear el estado y cómo funciona. ¿Por qué es necesario rastrear el estado en un componente? Rastrear el estado en un componente es esencial porque nos permite que el componente sea dinámico y reactivo . Esto significa que el componente puede actualizar su interfaz en respuesta a cambios internos o externos sin tener que rehacerse completamente o actualizarse de forma manual.  Veamos algunos puntos clave: 1.-Mantener la interfaz actualizada: Cuando el estado cambia, React vuelve a "pintar" (renderizar) solo aquellas partes de la interfaz que dependen de ese estado. Esto es importante para crear aplicaciones interactivas donde los datos pueden cambiar con las acciones del usuario, como al hacer clic en botones, esc...
Leer más