@@ -22,7 +22,7 @@ export const HeroDesktop: React.FC = () => {
22
22
const [ scrollPosition , setScrollPosition ] = useState ( scrollY . get ( ) ) ;
23
23
const scrollHeight = useMemo ( ( ) => sectionHeight / 3 , [ sectionHeight ] ) ;
24
24
const [ animationComplete , setAnimationComplete ] = useState ( false ) ;
25
- const isMounted = useRef ( false ) ;
25
+ const isMountedRef = useRef ( false ) ;
26
26
27
27
scrollY . onChange ( ( updatedScroll ) => setScrollPosition ( updatedScroll ) ) ;
28
28
@@ -102,9 +102,9 @@ export const HeroDesktop: React.FC = () => {
102
102
} , [ sectionRef ] ) ;
103
103
104
104
useLayoutEffect ( ( ) => {
105
- if ( isMounted . current ) return ;
105
+ if ( isMountedRef . current ) return ;
106
106
107
- isMounted . current = ! ! sectionRef . current ;
107
+ isMountedRef . current = ! ! sectionRef . current ;
108
108
} , [ sectionRef ] ) ;
109
109
110
110
useEffect ( ( ) => {
@@ -154,6 +154,8 @@ export const HeroDesktop: React.FC = () => {
154
154
// eslint-disable-next-line react-hooks/exhaustive-deps
155
155
} , [ animationComplete ] ) ;
156
156
157
+ const isMounted = isMountedRef . current ;
158
+
157
159
return (
158
160
< AnimatedBox
159
161
ref = { sectionRef }
@@ -180,7 +182,7 @@ export const HeroDesktop: React.FC = () => {
180
182
position : "sticky" ,
181
183
top : 0 ,
182
184
transform : "scale($container-scale)" ,
183
- opacity : isMounted . current ? 1 : 0 ,
185
+ opacity : isMounted ? 1 : 0 ,
184
186
transition : "opacity 300ms linear" ,
185
187
186
188
display : "flex" ,
0 commit comments