Conditional return ref-timing issue (React)
My
The component receives as an arg, model_imgs_key.
The return tests
My first useEffect, the one listening for the model_imgs_key argument, runs a
2 things react to the invImagesMap state assignment;
1. The return is changed to now instead display the second FadeTransition:
2. The second useEffect (the one listening for
This second useEffect needs to be able to define a scrollContainer variable, by referencing the ref assignment made on the second, latter
However, this 2nd useEffect can't define scrollContainer (using the ref) because the second/latter
GH in comment
<ImgScrollGallery/> component has 3 local states; canScrollLeft, canScrollRight (both null by default), and invImagesMap (empty obj {} by default).The component receives as an arg, model_imgs_key.
The return tests
Object.keys(invImagesMap).length, and since it's still 0 upon first mounting, returns the first version of FadeTransition; <FadeTransition key="loading" className="gallery_root"/> (see 2nd attmt).My first useEffect, the one listening for the model_imgs_key argument, runs a
fetch2 things react to the invImagesMap state assignment;
1. The return is changed to now instead display the second FadeTransition:
<FadeTransition key="content" className="gallery_root" ref={scrollContainerRef}> (see 3rd attmt)2. The second useEffect (the one listening for
invImagesMap[model_imgs_key]) is triggered to run.This second useEffect needs to be able to define a scrollContainer variable, by referencing the ref assignment made on the second, latter
<FadeTransition ref={scrollContainerRef}/> container, in order to subsequently set the canScrollLeft & canScrollRight states, which the <LeftScrollBtnLarge/> & <RightScrollBtnLarge/> buttons inside of this latter FadeTransition depend on to render. (see attmt 4 for how 2nd version of <FadeTransition/> should look).However, this 2nd useEffect can't define scrollContainer (using the ref) because the second/latter
<FadeTransition ref={scrollContainerRef}/> is not fully mounting in time, thus scrollContainerRef.current doesn't yet have a value able to be read, and so those states (which control the buttons' returns) are being left null. The second/latter <FadeTransition ref={scrollContainerRef}/> container renders, but lacks the <RightScrollBtnLarge/> since canScrollRight is unable to be setGH in comment
imgScrollGallery.js7.54KB
