Prevent unnecessary rerenders for PlaidEmbeddedLink (#343)

src/PlaidEmbeddedLink.test.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { PlaidEmbeddedLink, PlaidLinkOptions } from './';
+
+import useScript from 'react-script-hook';
+jest.mock('react-script-hook');
+const mockedUseScript = useScript as jest.Mock;
+
+const ScriptLoadingState = {
+  LOADING: [true, null],
+  LOADED: [false, null],
+  ERROR: [false, 'SCRIPT_LOAD_ERROR'],
+};
+
+describe('PlaidEmbeddedLink', () => {
+  const config: PlaidLinkOptions = {
+    token: 'test-token',
+    onSuccess: jest.fn(),
+    onExit: jest.fn(),
+    onLoad: jest.fn(),
+    onEvent: jest.fn(),
+  };
+  const createEmbeddedSpy = jest.fn(() => ({
+    destroy: jest.fn(),
+  }));
+
+  beforeEach(() => {
+    mockedUseScript.mockImplementation(() => ScriptLoadingState.LOADED);
+    window.Plaid = {
+      createEmbedded: createEmbeddedSpy,
+    };
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should not rerender if config did not change', () => {
+    const styles = { height: '350px', width: '350px', backgroundColor: 'white' };
+    const { rerender } = render(<PlaidEmbeddedLink {...config} style={styles} />);
+    expect(createEmbeddedSpy).toHaveBeenCalledTimes(1);
+    rerender(<PlaidEmbeddedLink {...config} style={{...styles, backgroundColor: 'light-blue'}} />);
+    expect(createEmbeddedSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('should rerender if config did change', () => {
+    const { rerender } = render(<PlaidEmbeddedLink {...config} />);
+    expect(createEmbeddedSpy).toHaveBeenCalledTimes(1);
+    const newConfig = { ...config, token: 'new-test-token' };
+    rerender(<PlaidEmbeddedLink {...newConfig} />);
+    expect(createEmbeddedSpy).toHaveBeenCalledTimes(2);
+  });
+});

src/PlaidEmbeddedLink.tsx

@@ -1,11 +1,35 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useMemo } from 'react';
 import useScript from 'react-script-hook';
 
 import { PLAID_LINK_STABLE_URL } from './constants';
-import { PlaidEmbeddedLinkPropTypes } from './types';
+import {
+  PlaidEmbeddedLinkPropTypes,
+  PlaidLinkOptionsWithLinkToken,
+} from './types';
 
 export const PlaidEmbeddedLink = (props: PlaidEmbeddedLinkPropTypes) => {
-  const { style, className, ...config } = props;
+  const {
+    style,
+    className,
+    onSuccess,
+    onExit,
+    onLoad,
+    onEvent,
+    token,
+    receivedRedirectUri,
+  } = props;
+
+  const config = useMemo<PlaidLinkOptionsWithLinkToken>(
+    () => ({
+      onSuccess,
+      onExit,
+      onLoad,
+      onEvent,
+      token,
+      receivedRedirectUri,
+    }),
+    [onSuccess, onExit, onLoad, onEvent, token, receivedRedirectUri]
+  );
 
   // Asynchronously load the plaid/link/stable url into the DOM
   const [loading, error] = useScript({

src/types/index.ts

@@ -165,7 +165,7 @@ export type PlaidLinkPropTypes = PlaidLinkOptions & {
   style?: React.CSSProperties;
 };
 
-export type PlaidEmbeddedLinkPropTypes = PlaidLinkOptions & {
+export type PlaidEmbeddedLinkPropTypes = PlaidLinkOptionsWithLinkToken & {
   className?: string;
   style?: React.CSSProperties;
 };