[Dúvida] Por que usar o ScrollToTop?

O useEffect é um hook do React que é usado para executar uma função após uma determinada ação, como renderização de uma função ou mudança de estado. O window.scrollTo(x, y) é uma função que é usada para rolar a janela para uma determinada posição.

A razão pela qual usamos o window.scrollTo(x, y) dentro de um useEffect é para garantir que a função seja executada apenas após a renderização da função ou mudança de estado. Isso é importante porque o window.scrollTo(x, y) pode ter um impacto no desempenho do seu aplicativo, se for executado com muita frequência.

Se você usasse o window.scrollTo(x, y) separadamente, ele seria executado sempre que a página fosse carregada, mesmo que a função ou estado não tivesse mudado. Isso poderia levar a um desempenho lento e uma experiência do usuário ruim.

Usando o useEffect, você pode garantir que a função seja executada apenas quando necessário, o que melhorará o desempenho do seu aplicativo e a experiência do usuário.

Aqui está um exemplo de como usar o useEffect para rolar a janela para uma determinada posição:

function App() {
  const [x, setX] = useState(0);
  const [y, setY] = useState(0);

  useEffect(() => {
    window.scrollTo(x, y);
  }, [x, y]);

  return (
    <div>
      <input type="number" onChange={(e) => setX(e.target.value)} />
      <input type="number" onChange={(e) => setY(e.target.value)} />
    </div>
  );
}

Neste exemplo, estamos usando o useEffect para rolar a janela para a posição x, y. O useEffect está sendo chamado com os valores de x e y como argumentos. Isso garante que a função seja executada apenas quando os valores de x e y mudarem.

Você pode usar o useEffect para rolar a janela para qualquer posição. Basta passar as coordenadas x e y como argumentos para o useEffect.