From c6aa4fd7584bd8980aef6c8f4d5024e08a236a0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B3n=20Trausti?= <icewolfy@gmail.com>
Date: Sun, 19 Nov 2023 19:58:38 +0000
Subject: [PATCH] Fix lifecycle methods for the context

---
 .../ParallaxProvider/ParallaxProvider.tsx     | 33 ++++++++++---------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/components/ParallaxProvider/ParallaxProvider.tsx b/src/components/ParallaxProvider/ParallaxProvider.tsx
index fe604189..89ffe58a 100644
--- a/src/components/ParallaxProvider/ParallaxProvider.tsx
+++ b/src/components/ParallaxProvider/ParallaxProvider.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useEffect, useRef } from 'react';
+import React, { PropsWithChildren, useEffect, useState } from 'react';
 
 import { ParallaxContext } from '../../context/ParallaxContext';
 import { ScrollAxis } from 'parallax-controller';
@@ -8,41 +8,44 @@ import { createController } from './helpers';
 export function ParallaxProvider(
   props: PropsWithChildren<ParallaxProviderProps>
 ) {
-  const controller = useRef(
+  const [controller] = useState(
     createController({
       scrollAxis: props.scrollAxis || ScrollAxis.vertical,
       scrollContainer: props.scrollContainer,
       disabled: props.isDisabled,
     })
   );
-
   // update scroll container
   useEffect(() => {
-    if (props.scrollContainer && controller.current) {
-      controller.current.updateScrollContainer(props.scrollContainer);
+    if (props.scrollContainer && controller) {
+      controller.updateScrollContainer(props.scrollContainer);
     }
-  }, [props.scrollContainer, controller.current]);
+  }, [props.scrollContainer, controller]);
 
   // disable/enable parallax
   useEffect(() => {
-    if (props.isDisabled && controller.current) {
-      controller.current.disableParallaxController();
+    if (props.isDisabled && controller) {
+      controller.disableParallaxController();
     }
-    if (!props.isDisabled && controller.current) {
-      controller.current.enableParallaxController();
+    if (!props.isDisabled && controller) {
+      controller.enableParallaxController();
     }
-  }, [props.isDisabled, controller.current]);
+  }, [props.isDisabled, controller]);
 
-  // remove the controller when unmounting
+  // enable and disable parallax controller on mount/unmount
   useEffect(() => {
+    // Enable it on mount
+    if (!props.isDisabled && controller) {
+      controller && controller?.enableParallaxController();
+    }
     return () => {
-      controller?.current && controller?.current.destroy();
-      controller.current = null;
+      // Disable it on unmount
+      controller && controller?.disableParallaxController();
     };
   }, []);
 
   return (
-    <ParallaxContext.Provider value={controller.current}>
+    <ParallaxContext.Provider value={controller}>
       {props.children}
     </ParallaxContext.Provider>
   );