fix: create controller only once (#235)

- related to strict mode issues #233 #227 and #221
- credit to @raRaRa for #234

Author: jscottsmith

src/components/ParallaxProvider/ParallaxProvider.tsx

@@ -1,20 +1,22 @@
 import React, { PropsWithChildren, useEffect, useRef } from 'react';
 
 import { ParallaxContext } from '../../context/ParallaxContext';
-import { ScrollAxis } from 'parallax-controller';
+import { ParallaxController, ScrollAxis } from 'parallax-controller';
 import { ParallaxProviderProps } from './types';
 import { createController } from './helpers';
 
 export function ParallaxProvider(
   props: PropsWithChildren<ParallaxProviderProps>
 ) {
-  const controller = useRef(
-    createController({
+  const controller = useRef<null | ParallaxController>(null);
+
+  if (!controller.current) {
+    controller.current = createController({
       scrollAxis: props.scrollAxis || ScrollAxis.vertical,
       scrollContainer: props.scrollContainer,
       disabled: props.isDisabled,
-    })
-  );
+    });
+  }
 
   // update scroll container
   useEffect(() => {
@@ -37,7 +39,6 @@ export function ParallaxProvider(
   useEffect(() => {
     return () => {
       controller?.current && controller?.current.destroy();
-      controller.current = null;
     };
   }, []);
 

src/components/ParallaxProvider/index.test.tsx

@@ -7,6 +7,7 @@ import { ParallaxController } from 'parallax-controller';
 import { render } from '@testing-library/react';
 import { ParallaxProvider } from '.';
 import { useParallaxController } from '../../hooks/useParallaxController';
+import * as helpers from './helpers';
 
 describe('A <ParallaxProvider>', () => {
   it('to render children', () => {
@@ -48,6 +49,15 @@ describe('A <ParallaxProvider>', () => {
     expect(parallaxController).toBeInstanceOf(ParallaxController);
   });
 
+  it('calls to createController only once', () => {
+    jest.spyOn(helpers, 'createController');
+    const { rerender } = render(<ParallaxProvider />);
+    rerender(<ParallaxProvider />);
+    rerender(<ParallaxProvider />);
+    rerender(<ParallaxProvider />);
+    expect(helpers.createController).toHaveBeenCalledTimes(1);
+  });
+
   it('to disable parallax elements and re-enable', () => {
     let parallaxController: ParallaxController | null = null;
 
@@ -100,8 +110,10 @@ describe('A <ParallaxProvider>', () => {
     );
 
     screen.unmount();
-    // @ts-expect-error
-    expect(parallaxController?.destroy).toBeCalled();
+
+    expect(
+      (parallaxController as unknown as ParallaxController)?.destroy
+    ).toBeCalled();
   });
 
   it('to update the scroll container when receiving a new container el', () => {