Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 61d56cc

Browse files
fix: create controller only once (#235)
- related to strict mode issues #233 #227 and #221 - credit to @raRaRa for #234 
1 parent f2e1719 commit 61d56cc

File tree

2 files changed

+21
-8
lines changed

2 files changed

+21
-8
lines changed

‎src/components/ParallaxProvider/ParallaxProvider.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
11
import React, { PropsWithChildren, useEffect, useRef } from 'react';
22

33
import { ParallaxContext } from '../../context/ParallaxContext';
4-
import { ScrollAxis } from 'parallax-controller';
4+
import { ParallaxController,ScrollAxis } from 'parallax-controller';
55
import { ParallaxProviderProps } from './types';
66
import { createController } from './helpers';
77

88
export function ParallaxProvider(
99
props: PropsWithChildren<ParallaxProviderProps>
1010
) {
11-
const controller = useRef(
12-
createController({
11+
const controller = useRef<null | ParallaxController>(null);
12+
13+
if (!controller.current) {
14+
controller.current = createController({
1315
scrollAxis: props.scrollAxis || ScrollAxis.vertical,
1416
scrollContainer: props.scrollContainer,
1517
disabled: props.isDisabled,
16-
})
17-
);
18+
});
19+
}
1820

1921
// update scroll container
2022
useEffect(() => {
@@ -37,7 +39,6 @@ export function ParallaxProvider(
3739
useEffect(() => {
3840
return () => {
3941
controller?.current && controller?.current.destroy();
40-
controller.current = null;
4142
};
4243
}, []);
4344

‎src/components/ParallaxProvider/index.test.tsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { ParallaxController } from 'parallax-controller';
77
import { render } from '@testing-library/react';
88
import { ParallaxProvider } from '.';
99
import { useParallaxController } from '../../hooks/useParallaxController';
10+
import * as helpers from './helpers';
1011

1112
describe('A <ParallaxProvider>', () => {
1213
it('to render children', () => {
@@ -48,6 +49,15 @@ describe('A <ParallaxProvider>', () => {
4849
expect(parallaxController).toBeInstanceOf(ParallaxController);
4950
});
5051

52+
it('calls to createController only once', () => {
53+
jest.spyOn(helpers, 'createController');
54+
const { rerender } = render(<ParallaxProvider />);
55+
rerender(<ParallaxProvider />);
56+
rerender(<ParallaxProvider />);
57+
rerender(<ParallaxProvider />);
58+
expect(helpers.createController).toHaveBeenCalledTimes(1);
59+
});
60+
5161
it('to disable parallax elements and re-enable', () => {
5262
let parallaxController: ParallaxController | null = null;
5363

@@ -100,8 +110,10 @@ describe('A <ParallaxProvider>', () => {
100110
);
101111

102112
screen.unmount();
103-
// @ts-expect-error
104-
expect(parallaxController?.destroy).toBeCalled();
113+
114+
expect(
115+
(parallaxController as unknown as ParallaxController)?.destroy
116+
).toBeCalled();
105117
});
106118

107119
it('to update the scroll container when receiving a new container el', () => {

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /