imagine we have alot input field and bulky state like this to update it
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",
});
and we divided this big data in 6 component
for example BankInfo, AccountInfo, AddressInfo, and... we update state inside this component and we Use ContextAPI to pass state
<DataContext.Provider value={{ data, setData }}>
<ListProfile />
<OrganizationalRuling />
<BankInfo />
<Address />
<Commission />
<AccountInfo />
</DataContext.Provider>
everthing is ok in this implementation, its clean.
BUT
everytime user start typing something the whole components re-render there is a clear lag and delay in typing.
so i think one way is to update the State with onBlur but that is also slow a little i think. another way is to have seperate state inside every children component for example for BankInfo component have a single state and lift the state up but i have no idea how to do that and make it a single Object so i can send it the backend
How can we improve perfomance in a data like this without re-rendering everything ?
what is correct way to collect data in this situation?
i will appreciate your help.
If you have to manage the state of each component at this higher level (to perform an action using data across each component), then I recommend simply passing this data into each component via props instead of using a context provider.
The context API should be used to prevent a situation where you are passing the same prop into literally all of your components (and typically a prop which is not changing frequently). I typically associate it with auth or user.
Making this modification to declarative state management, will greatly improve the readability of this application as well as allow the renderer to determine which components to partially render. i.e. only changes which are necessary to be made will be made, because you will have properly hooked up the reactive elements of your application
Here is a code example:
function Overview() {
...
function submit() {
}
return (
<>
<BankInfo name={bankName1} ... onChange={submit} />
...
</>
)
}
function BankInfo({name, ..., onChange}) {
return (
<>
<input value={name} onChange={onChange} />
...
</>
)
}