React Hook - useLayoutEffect §

---

O useLayoutEffect é um dos React Hooks que proporciona controle mais detalhado sobre a manipulação do layout antes da renderização final do DOM. Ele é semelhante ao useEffect, mas é sincronizado com o ciclo de vida de atualização do DOM, ocorrendo após todas as mutações no DOM, mas antes da pintura na tela.

Diferença em relação ao useEffect

Enquanto o useEffect é mais adequado para operações assíncronas que não bloqueiam a pintura na tela, o useLayoutEffect é útil quando é necessário garantir que as mudanças no layout sejam aplicadas de forma síncrona antes da pintura, mesmo que isso possa causar algum impacto no desempenho.

Sintaxe §

useLayoutEffect(() => {
  // Lógica síncrona para manipulação do layout
  // ...
}, [dependencias]);

Assim como o useEffect, o useLayoutEffect recebe uma função de retorno e uma lista de dependências. No entanto, a principal diferença é que o código dentro de useLayoutEffect é executado de forma síncrona após as mudanças no DOM.

Caso de uso §

import { useLayoutEffect, useRef, useState } from 'react';
 
export const Home = () => {
  const [counted, setCounted] = useState([0, 1, 2, 3, 4]);
  const divRef = useRef();
 
  useLayoutEffect(() => {
    const simulateTimeConsumingOperation = () => {
      const startTime = Date.now();
      while (Date.now() < startTime + 1500);
    };
 
    simulateTimeConsumingOperation();
 
    divRef.current.scrollTop = divRef.current.scrollHeight;
  });
 
  const handleClick = () => {
    setCounted((c) => [...c, Number(c.slice(-1)) + 1]);
  };
 
  return (
    <>
      <button onClick={handleClick}>Count {counted.slice(-1)}</button>
      <div ref={divRef} style={{ height: '100px', width: '100px', overflowY: 'scroll' }}>
        {counted.map((c) => {
          return <p key={`c-${c}`}>{c}</p>;
        })}
      </div>
    </>
  );
};
 

Neste exemplo, o useLayoutEffect é empregado para controlar de maneira síncrona a manipulação do layout, permitindo a atualização imediata de um elemento de rolagem. A simulação de uma operação demorada destaca a capacidade do useLayoutEffect de garantir que as mudanças no layout sejam aplicadas antes da renderização final no DOM.

Quanto usar useLayoutEffect?

• Medições do layout: Quando você precisa realizar medições no layout do DOM, como obter as dimensões de um elemento após ele ser renderizado.
• Manipulação síncrona do layout: Em situações em que é crucial realizar manipulações no layout de forma síncrona, evitando flashes ou cálculos incorretos de layout.

O useLayoutEffect é uma ferramenta poderosa quando é necessário lidar com manipulações de layout de forma síncrona. No entanto, deve ser utilizado com cuidado, pois operações demoradas podem impactar o desempenho da aplicação. Geralmente, o useEffect é suficiente para a maioria dos casos, e o useLayoutEffect é reservado para situações específicas que exigem sincronia estrita com o layout do DOM.

Referências §

---

• Curso de React.Js e Next.Js (nível intermediário e avançado)