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
6 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.
@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.
yeah that is what iv done, someone suggested to me the same on stackoverflow also had to the state was somehow needed to be synced in a useEffect
@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.
I really don't remember why iv done that hahahah maybe cuz on a succefull creation of a product the state images stays there even wen i leave the create-page and get back to it
@West African Lion did that solve your problem?
the key didn't solve it what solved it for me is adding a useLayoutEffect and a useEffect
first one to clear the state so I don't see stale images whenever I navigate back the create-form
and the second was to do a sync because landing on edit-product form was showing me all the fields excepte the images untill I hit a refresh
first one to clear the state so I don't see stale images whenever I navigate back the create-form
and the second was to do a sync because landing on edit-product form was showing me all the fields excepte the images untill I hit a refresh