es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Evitando re-renderizaciones innecesarias de filas/hijos de tabla en React.

28 Jul, 2023 Programación

Supongamos que hay una tabla que necesita mantener algún estado, por ejemplo, conocer el último elemento sobre el que se pasó el cursor. Para hacerlo, necesitaríamos un evento onMouseOver en un elemento hijo de esta forma:

y luego el componente que contiene la tabla volvería a renderizar a todos los hijos después de setState({lastHovered: e.target}) (algo por el estilo).

Si el objetivo del hover es realizar cambios en una sola fila (digamos, mostrar/ocultar algo sin utilizar CSS) ¿existe alguna manera de mantener este estado a un nivel superior que la fila y solo renderizar los cambios en los

que se ven afectados por el hover?

Como ejemplo, supongamos que hay un retraso al pasar el cursor dentro o fuera de la tabla. Cuando se pasa el cursor dentro, los hijos deberían mostrar un tooltip, pero solo si se pasa directamente sobre ellos. La tabla/padre necesita mantener algún estado para hacer un seguimiento de esto, pero ¿existe alguna manera de no tener que volver a renderizar toda la lista de hijos?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Una forma de manejar este escenario es utilizando un componente principal con estado que almacena el estado de la acción de pasar el cursor sobre cada elemento secundario. Cuando un elemento secundario es pasado por encima, el manejador de eventos onMouseOver puede actualizar el estado del componente principal estableciendo el estado de pasar el cursor del elemento secundario correspondiente a true. Luego, los componentes individuales de los elementos secundarios pueden renderizar condicionalmente el tooltip según su estado de pasar el cursor.

    Al utilizar este enfoque, el componente principal solo necesita volver a renderizar el elemento secundario específico que se pasó por encima, en lugar de volver a renderizar la lista completa de elementos secundarios, lo que conduce a una mejor rendimiento. Esto se puede lograr pasando el estado de pasar el cursor de cada elemento secundario como una propiedad y renderizando condicionalmente el tooltip según el valor de la propiedad.

    Por ejemplo:

    function Table() {
  const [elementoPasadoPorEncima, setElementoPasadoPorEncima] = useState(null);

  const manejarPasadoPorEncima = (index) => {
    setElementoPasadoPorEncima(index);
  };

  return (
    <div>
      {data.map((item, index) => (
        <tablerow key="{item.id}" item="{item}" estapasadoporencima="{elementoPasadoPorEncima" =="=" index}="" onmouseover="{()" ==""> manejarPasadoPorEncima(index)}
        />
      ))}
    </tablerow></div>
  );
}

function TableRow({ item, estaPasadoPorEncima, onMouseOver }) {
  return (
    <div onmouseover="{onMouseOver}">
      <div>{item.name}</div>
      {estaPasadoPorEncima && <div>Contenido del tooltip</div>}
    </div>
  );
}

    En este ejemplo, el componente Table almacena el estado del elemento secundario al que se pasa el cursor y lo pasa a cada componente TableRow. El componente TableRow renderiza condicionalmente el tooltip según su propiedad estaPasadoPorEncima. Cuando se pasa el cursor sobre un TableRow, solo ese componente específico vuelve a renderizarse, lo que mejora el rendimiento.

Comments are closed.