React Memo

 El uso memohará que React omita la renderización de un componente si sus accesorios no han cambiado.

Esto puede mejorar el rendimiento.

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

Problema

En este ejemplo, el Todoscomponente se vuelve a representar incluso cuando los todos 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 />);

Cuando hace 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 este problema, podemos usar memo.

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

Envuelva la Todosexportación del componente en memo:

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 />);

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





Comentarios

Publicar un comentario

Entradas populares de este blog

API Web Crypto,

 I have digital signature certificates efirma de sat mexico. I want an app to load the .key certificate and convert it to pem format. Once you convert it, display it in a textarea using the Web Crypto API. Tengo certificados de firma digital efirma de sat mexico. Quiero una aplicación que cargue el certificado .key y lo convierta a formato pem. Una vez que lo convierta, lo muestre en un área de texto utilizando la API Web Crypto. ChatGPT Plus ChatGPT To convert a .key certificate to PEM format using the Web Crypto API, you can use the following steps: Load the .key certificate file using the FileReader API. Here's an example code snippet to achieve that: javascript Copiar código const fileInput = document . querySelector ( 'input[type="file"]' ); const reader = new FileReader (); reader. onload = () => { const keyData = reader. result ; // Code to convert the key data to PEM format }; reader. readAsText (fileInput. files [ 0 ]); Convert the key dat...
Leer más

React Events

 Reaccionar eventos Al igual que los eventos HTML DOM, React puede realizar acciones basadas en eventos del usuario.React tiene los mismos eventos que HTML: hacer clic, cambiar, pasar el mouse, etc. Agregar eventos Los eventos de React están escritos en la sintaxis de camelCase: onClick en lugar de onclick . Los controladores de eventos de React están escritos entre llaves: onClick={shoot} en lugar de onclick="shoot()" . React: <button onClick={shoot}>Take the Shot!</button> Html: <button onclick="shoot()">Take the Shot!</button> Coloque la shootfunción dentro del Footballcomponente: function Football() {   const shoot = () => {     alert("Great Shot!");   }   return (     <button onClick={shoot}>Take the shot!</button>   ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Football />); Pasar argumentos Para pasar un argumento a un controlador de eventos, use una...
Leer más

firmas digitales integradas en PDFs

 Para las firmas digitales integradas en PDFs, el proceso es un poco diferente al de simplemente manejar archivos y firmas por separado. Aquí te explico en detalle cómo se realiza y cómo el receptor obtiene la clave pública del firmante. Funcionamiento de las Firmas Digitales Integradas en PDFs Firmante : El firmante utiliza un software que soporta firmas digitales en PDF (como Adobe Acrobat, por ejemplo) para firmar el documento PDF. Este software inserta la firma digital en el PDF y también incluye el certificado digital del firmante dentro del archivo PDF. Receptor : El receptor abre el documento PDF utilizando un software compatible con firmas digitales (Adobe Acrobat Reader, por ejemplo). Este software extrae la firma digital y el certificado digital del firmante del PDF. Pasos Detallados Firma del Documento PDF : El documento PDF es firmado utilizando la clave privada del firmante. Se genera un hash del contenido del PDF. El hash es cifrado utilizando la clave privada del fir...
Leer más