`Funcția flushSync în ReactDOM: Forțarea Actualizărilor de Stare Sincrone` în React & Next.js

Ghid complet pentru flushSync din ReactDOM: ieșirea controlată din batching-ul automat, forțarea actualizărilor DOM imediate și măsurători precise.

Sintaxă

flushSync(() => { setState(newValue); });

În mod implicit, React grupează automat toate modificările de stare (automatic batching) pentru a randa o singură dată ecranul. Deși optimă pentru performanță, există scenarii speciale când aveți nevoie ca DOM-ul să fie actualizat imediat și sincron înainte de a trece la linia următoare de cod (de exemplu pentru a derula pagina exact la ultimul mesaj trimis într-un chat).

Derularea instantanee a unei liste de mesaje chat cu flushSync

import { useState, useRef } from 'react';
import { flushSync } from 'react-dom';

export function FereastraChat() {
  const [mesaje, setMesaje] = useState(['Salut!', 'Cum te pot ajuta?']);
  const refLista = useRef(null);

  function adaugaMesaj(textNou) {
    // Forțăm React să execute randarea DOM imediat în mod sincron:
    flushSync(() => {
      setMesaje(anterioare => [...anterioare, textNou]);
    });

    // Aici DOM-ul este DEJA actualizat cu noul copil, putem calcula scroll-ul exact:
    if (refLista.current) {
      refLista.current.scrollTop = refLista.current.scrollHeight;
    }
  }

  return (
    <div>
      <div ref={refLista} className="lista-scrollabila">
        {mesaje.map((m, i) => <p key={i}>{m}</p>)}
      </div>
      <button onClick={() => adaugaMesaj('Mesaj nou adăugat acum!')}>Trimite</button>
    </div>
  );
}