imagina que tenemos muchos campos de entrada y un estado voluminoso como este para actualizarlo
const [data, setData] = useState({ firstName: "", lastName: "", gender: "", dateOfBirth: "", nationalCode: "", mobileNum: "", organizationalRuling: "", startOrder: null, endOrder: null, afterOrderEnd: [], cardNum1: "", bankName1: "", cardNum2: "", bankName2: "", shabaNum: null, country: "", state: "", city: "", address: "", zipCode: null, phoneNum: "", commissionFor: [], commissionPercentage: [], salaryFor: [], salaryPrice: [], offFor: [], offPercentage: [], username: "", password: "", passwordRepeat: "", userStatus: "activeUser", }); y dividimos estos grandes datos en 6 componentes, por ejemplo BankInfo, AccountInfo, AddressInfo, y... actualizamos el estado dentro de este componente y usamos ContextAPI para pasar el estado
<DataContext.Provider value={{ data, setData }}> <ListProfile /> <OrganizationalRuling /> <BankInfo /> <Address /> <Commission /> <AccountInfo /> </DataContext.Provider>todo está bien en esta implementación, está limpio.
PERO
cada vez que el usuario comienza a escribir algo, todos los componentes se vuelven a renderizar, hay un claro retraso y demora en escribir.
así que creo que one way es actualizar el estado con onBlur , pero creo que eso también es un poco lento. another way es tener un estado separado dentro de cada componente secundario, por ejemplo, para el componente BankInfo, tenga un solo estado y lift the state up pero no tengo idea de cómo hacerlo y convertirlo en un single Object para poder send it the backend . ¿Cómo podemos? mejorar el rendimiento en datos como este sin volver a renderizar todo? ¿Cuál es la forma correcta de recopilar datos en esta situación?
Apreciaré su ayuda.
Si tiene que administrar el estado de cada componente en este nivel superior (para realizar una acción usando datos en cada componente), le recomiendo simplemente pasar estos datos a cada componente a través de accesorios en lugar de usar un proveedor de contexto.
La API de contexto debe usarse para evitar una situación en la que está pasando el mismo accesorio literalmente a todos sus componentes (y, por lo general, un accesorio que no cambia con frecuencia). Normalmente lo asocio con auth o user .
Hacer esta modificación a la gestión de estado declarativa mejorará en gran medida la legibilidad de esta aplicación y permitirá que el renderizador determine qué componentes renderizar parcialmente. es decir, solo se realizarán los cambios necesarios, ya que habrá conectado correctamente los elementos reactivos de su aplicación
Aquí hay un ejemplo de código:
function Overview() { ... function submit() { } return ( <> <BankInfo name={bankName1} ... onChange={submit} /> ... </> ) } function BankInfo({name, ..., onChange}) { return ( <> <input value={name} onChange={onChange} /> ... </> ) }