SCAL-241097 Fix for liveboard shound not rerender if parent component rerenders

Author: adityamittal3107

src/react/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import { deepMerge } from '../utils';
 import { SearchBarEmbed as _SearchBarEmbed, SearchBarViewConfig } from '../embed/search-bar';
@@ -20,50 +20,49 @@ const componentFactory = <T extends typeof TsEmbed, U extends EmbedProps, V exte
     // not be destroyed when the component is unmounted.
     isPreRenderedComponent = false,
 ) => React.forwardRef<InstanceType<T>, U>(
-    (props: U, forwardedRef: React.MutableRefObject<InstanceType<T>>) => {
-        const ref = React.useRef<HTMLDivElement>(null);
-        const { className, ...embedProps } = props;
-        const { viewConfig, listeners } = getViewPropsAndListeners<Omit<U, 'className'>, V>(
-            embedProps,
-        );
-
-        const handleDestroy = (tsEmbed: InstanceType<T>) => {
+    memo(
+        (props: U, forwardedRef: React.MutableRefObject<InstanceType<T>>) => {
+            const ref = React.useRef<HTMLDivElement>(null);
+            const { className, ...embedProps } = props;
+            const { viewConfig, listeners } = getViewPropsAndListeners<Omit<U, 'className'>, V>(embedProps);
+
+            const handleDestroy = (tsEmbed: InstanceType<T>) => {
             // do not destroy if it is a preRender component
-            if (isPreRenderedComponent) return;
+                if (isPreRenderedComponent) return;
 
-            // if component is connected to a preRendered component
-            if (props.preRenderId) {
-                tsEmbed.hidePreRender();
-                return;
-            }
+                // if component is connected to a preRendered component
+                if (props.preRenderId) {
+                    tsEmbed.hidePreRender();
+                    return;
+                }
 
-            tsEmbed.destroy();
-        };
+                tsEmbed.destroy();
+            };
 
-        const handlePreRenderRendering = (tsEmbed: InstanceType<T>) => {
-            tsEmbed.preRender();
-        };
+            const handlePreRenderRendering = (tsEmbed: InstanceType<T>) => {
+                tsEmbed.preRender();
+            };
 
-        const handleDefaultRendering = (tsEmbed: InstanceType<T>) => {
+            const handleDefaultRendering = (tsEmbed: InstanceType<T>) => {
             // if component is connected to a preRendered component
-            if (props.preRenderId) {
-                tsEmbed.showPreRender();
-                return;
-            }
-
-            tsEmbed.render();
-        };
-
-        const handleRendering = (tsEmbed: InstanceType<T>) => {
-            if (isPreRenderedComponent) {
-                handlePreRenderRendering(tsEmbed);
-                return;
-            }
-            handleDefaultRendering(tsEmbed);
-        };
-
-        useDeepCompareEffect(() => {
-            const tsEmbed = new EmbedConstructor(
+                if (props.preRenderId) {
+                    tsEmbed.showPreRender();
+                    return;
+                }
+
+                tsEmbed.render();
+            };
+
+            const handleRendering = (tsEmbed: InstanceType<T>) => {
+                if (isPreRenderedComponent) {
+                    handlePreRenderRendering(tsEmbed);
+                    return;
+                }
+                handleDefaultRendering(tsEmbed);
+            };
+
+            useDeepCompareEffect(() => {
+                const tsEmbed = new EmbedConstructor(
                 ref!.current,
                 deepMerge(
                     {
@@ -74,26 +73,27 @@ const componentFactory = <T extends typeof TsEmbed, U extends EmbedProps, V exte
                     },
                     viewConfig,
                 ),
-            ) as InstanceType<T>;
-            Object.keys(listeners).forEach((eventName) => {
-                tsEmbed.on(eventName as EmbedEvent, listeners[eventName as EmbedEvent]);
-            });
-            handleRendering(tsEmbed);
-            if (forwardedRef) {
+                ) as InstanceType<T>;
+                Object.keys(listeners).forEach((eventName) => {
+                    tsEmbed.on(eventName as EmbedEvent, listeners[eventName as EmbedEvent]);
+                });
+                handleRendering(tsEmbed);
+                if (forwardedRef) {
                 // eslint-disable-next-line no-param-reassign
-                forwardedRef.current = tsEmbed;
-            }
-            return () => {
-                handleDestroy(tsEmbed);
-            };
-        }, [viewConfig, listeners]);
-
-        return viewConfig.insertAsSibling ? (
-            <span data-testid="tsEmbed" ref={ref} style={{ position: 'absolute' }}></span>
-        ) : (
-            <div data-testid="tsEmbed" ref={ref} className={className}></div>
-        );
-    },
+                    forwardedRef.current = tsEmbed;
+                }
+                return () => {
+                    handleDestroy(tsEmbed);
+                };
+            }, [viewConfig, listeners]);
+
+            return viewConfig.insertAsSibling ? (
+                <span data-testid="tsEmbed" ref={ref} style={{ position: 'absolute' }}></span>
+            ) : (
+                <div data-testid="tsEmbed" ref={ref} className={className}></div>
+            );
+        },
+    ),
 );
 
 interface SearchProps extends EmbedProps, SearchViewConfig { }