I want to move an array value from a higher component to a lower order component with the click of a button.
In the lower order component, I get props like this:
useEffect(() => {
if (props.poolInfo) {
setPoolInfo(props.poolInfo)
diskSlot.push(props.poolInfo.disks_enc_slot)
const firstِDiskSlot = Object.freeze(diskSlot);
console.log(firstِDiskSlot );//[58:0,58:1] For the first time rendreing
checkAllDiskInDriveGroup(props.poolInfo.disks_enc_slot, driveData)
}
return () => {
setPoolInfo(false)
setFormData({
count: {
options: [],
selectedValue: ""
},
disk: {
options: [],
selectedValue: ""
},
})
}
}, [props.poolInfo])
Rendering a second time and adding value to the higher component:
console.log(firstِDiskSlot); //[58:0,58:1,58:3:58:4]
But I want to (firstِDiskSlot) The first value that is rendered should remain and not change because I need the first value:[58:0,58:1]
How do I freeze the initial value (firstِDiskSlot) that does not change a second time?
If you want to run it only once(on first prop value) then just remove dependency and leave empty array - useEffect(() => ..., []). If the problem is that first value might be the empty array, or undefined, then introduce stable constant with useRef and fill it in useEffect, but only if not previously filled, and like that you will have only first valid value in reference.