Usare useLayoutEffect in React

useLayoutEffect è sostanzialmente la versione sincrona di useEffect.

Hanno la stessa identica sintassi, e sono entrami degli hooks di React.

Ma, come anticipato, useEffect è asincrono, ed ottimo per eseguire, ad esempio, chiamate ad API.

useLayoutEffect invece sincrono, e viene chiamato subito dopo che React ha effettuate tutte le sue operazioni sul DOM, ma prima di eseguire il rendering.

Qui sotto un possibile esempio del suo utilizzo:

import React, {useLayoutEffect, useRef} from 'react';

function App() {
  const elementRef = useRef(null);

  useLayoutEffect(() => {
    const element = elementRef.current;

    element.style.opacity = 0;
    setTimeout(() => {
      element.style.opacity = 1;
    }, 1000);

    return () => {
      element.style.opacity = 0;
    };
  }, []);

  return (
      <>
        <div ref={elementRef}>Animate me!</div>
      </>
  );
}

export default App;

Oppure possiamo usarlo per impostare l'autofocus:

import React, {useLayoutEffect, useRef} from 'react';

function App() {
  const inputRef = useRef(null);

  useLayoutEffect(() => {
    inputRef.current.focus();
  }, []);

  return (
      <>
        <input ref={inputRef}/>
      </>
  );
}

export default App;

Enjoy!