Tengo un campo de selección y un evento de selección. Tengo tres llamadas de setStates para actualizar mis estados locales.
Observación: El número de setStates escritos hace que se reproduzcan mucho. Cuando comenté setState, se redujo en consecuencia.
Ex:
<select name="cars" id="cars" onselect={(e) => handleSelect(e)}> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> const handleSelect = e => { setInvalid(false); setValue("some value"); setError("some error"); };Mi entendimiento fue que hará lotes y causará solo un renderizado. Pero obtuve 3 re-renderizaciones. ¿Alguna explicación a esto?
con react18 Automatic Batching se aplica de forma predeterminada, si ha devuelto n número de actualizaciones de estado dentro de una función, reaccionar solo volverá a procesar el componente una vez. Si desea detener este comportamiento, puede usar flushSync
import { flushSync } from "react-dom"; const clickMe = () => { setName("abc"); flushSync(() => { setCount(30); // react will create a re-render here }); setAge(30); setPin(1111); }; entonces, para el ejemplo anterior, reaccionar volverá a renderizar su componente dos veces al hacer clic en la función clickMe (), pero si está en la older version < 18 , la nueva renderización tendrá lugar n veces.