useLayoutEffect issue
Unanswered
omar_ab(@om4rAb) posted this in #help-forum
I got a dashboard of products, whenever I try to create/edit a product I had the issue where nexjs preserves the state between navigation, and as they recommended to clear the state on a useLayoutEffect
so when Iv added the following code to my client form
it worked fine, BUT the issue that comes now is whenever I click on a product to update it the first Time I enter the form I only see the product's data such as price,name... I don't see the Images at all UNTIL I hit a refresh
I have attached a video record to my issue and a codeSnap of my code
just to clarify what's on the record is the first part i use useLayoutEffect i enter the form the images don't appear
the second part is without useLayoutEffect
so when Iv added the following code to my client form
useLayoutEffect(() => {
return () => {
setImageChanges(() => [])
}
}, [])it worked fine, BUT the issue that comes now is whenever I click on a product to update it the first Time I enter the form I only see the product's data such as price,name... I don't see the Images at all UNTIL I hit a refresh
I have attached a video record to my issue and a codeSnap of my code
just to clarify what's on the record is the first part i use useLayoutEffect i enter the form the images don't appear
the second part is without useLayoutEffect
2 Replies
Yellow Wagtail
If the problem is still there, what you need to do is clear the image in
useLayoutEffect only when the mode is create, as you are currently clearing images for every mode. which makes the images disappear.West African Lion
I think the problem is you have given key = {crypto.randomUUID} can you use key={product.id}? is there any reason behind using key = {crypto.randomUUID} ? everytime react see a change consider form as a new one and destroy the previous form by the time of destroy it unmount the image.