E quando usar useLayoutEffect? Eu havia entendido que este deve ser usado quando manipulamos o DOM diretamente, por exemplo da forma que apliquei:
useLayoutEffect(() => {
document.getElementById("titulo").innerHTML = p.titulo;
}, []);
É correto? Ou ainda usaria useEffect para esse caso?
ps: esse document.getElementById foi criado para evitar fazer um context só pra obter esse titulo da página.
O seu entendimento está correto. useLayoutEffect é uma variação do useEffect que é executada síncronamente após todas as atualizações do DOM. É útil quando você precisa manipular o DOM diretamente, por exemplo, quando você precisa medir a largura ou altura de um elemento ou definir o foco em um elemento.
No seu exemplo, você está manipulando o DOM diretamente, atualizando o conteúdo do elemento com o id "titulo". Portanto, é correto usar o useLayoutEffect para garantir que a atualização do DOM seja síncrona e ocorra imediatamente após a atualização de estado.
No entanto, se a manipulação do DOM não precisa ser síncrona, você pode usar useEffect em vez de useLayoutEffect. Isso garante que a manipulação do DOM ocorra de forma assíncrona, após todas as atualizações de estado terem sido processadas. Isso pode ser mais eficiente em termos de desempenho, pois não bloqueará a thread principal do navegador durante a atualização do DOM.
Em resumo, você está usando o hook correto no seu exemplo. Use useLayoutEffect sempre que precisar manipular o DOM diretamente de forma síncrona e useEffect quando a manipulação do DOM puder ser assíncrona.