@zezosoft/zezo-ott-react-native-ui-kit 1.1.1 → 1.1.2

package/src/components/Content/Content.tsx

@@ -2,7 +2,7 @@
  * @author Naresh Dhamu
  * @lastModified Sun 08 Jun 2025 at 03:50 PM
  */
-import React, { useMemo } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import {
   ActivityIndicator,
   FlatList,
@@ -94,46 +94,55 @@ interface FooterProps {
   noContentFallbackProps?: NoContentFallbackProps;
 }
 
-const ContentFooter = ({
-  isEmpty,
-  ErrorComponent,
-  InfiniteScrollIsLoading,
-  InfiniteScrollLoaderComponent,
-  theme,
-  noContentFallbackProps,
-}: FooterProps) => {
-  const { theme: appliedTheme } = useInternalTheme(theme);
-  if (InfiniteScrollIsLoading) {
-    return (
-      InfiniteScrollLoaderComponent ?? (
-        <Animated.View
-          style={{
-            paddingVertical: scale(30),
-            alignItems: 'center',
-            justifyContent: 'center',
-            backgroundColor: 'transparent',
-          }}
-        >
-          <ActivityIndicator size="large" color={appliedTheme.colors.primary} />
-        </Animated.View>
-      )
-    );
-  }
+const ContentFooter = React.memo(
+  ({
+    isEmpty,
+    ErrorComponent,
+    InfiniteScrollIsLoading,
+    InfiniteScrollLoaderComponent,
+    theme,
+    noContentFallbackProps,
+  }: FooterProps) => {
+    const { theme: appliedTheme } = useInternalTheme(theme);
 
-  if (isEmpty) {
-    return ErrorComponent ? (
-      <>{ErrorComponent}</>
-    ) : (
-      <NoContentFallback
-        theme={theme}
-        {...noContentFallbackProps}
-        isLoading={noContentFallbackProps?.isLoading ?? false}
-      />
+    const loaderStyle = useMemo(
+      () => ({
+        paddingVertical: scale(30),
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        backgroundColor: 'transparent',
+      }),
+      []
     );
-  }
 
-  return null;
-};
+    if (InfiniteScrollIsLoading) {
+      return (
+        InfiniteScrollLoaderComponent ?? (
+          <Animated.View style={loaderStyle}>
+            <ActivityIndicator
+              size="large"
+              color={appliedTheme.colors.primary}
+            />
+          </Animated.View>
+        )
+      );
+    }
+
+    if (isEmpty) {
+      return ErrorComponent ? (
+        <>{ErrorComponent}</>
+      ) : (
+        <NoContentFallback
+          theme={theme}
+          {...noContentFallbackProps}
+          isLoading={noContentFallbackProps?.isLoading ?? false}
+        />
+      );
+    }
+
+    return null;
+  }
+);
 
 export const Content: React.FC<IContentProps> = ({
   customComponents,
@@ -157,6 +166,26 @@ export const Content: React.FC<IContentProps> = ({
     () => contentData?.sectionData ?? [],
     [contentData?.sectionData]
   );
+
+  // Memoize section data object to prevent unnecessary re-renders
+  const sectionDataMemo = useMemo(
+    () => ({
+      historyData: contentData.historyData,
+      category: contentData.category,
+    }),
+    [contentData.historyData, contentData.category]
+  );
+
+  // Memoize loading state object
+  const loadingStateMemo = useMemo(
+    () => ({
+      section: isLoading?.section ?? false,
+      history: isLoading?.history ?? false,
+      category: isLoading?.category ?? false,
+    }),
+    [isLoading?.section, isLoading?.history, isLoading?.category]
+  );
+
   const headerComponent = useMemo(() => {
     if (!contentData?.category || contentData.category.length === 0)
       return null;
@@ -180,51 +209,81 @@ export const Content: React.FC<IContentProps> = ({
     theme,
   ]);
 
-  const renderItem = ({
-    item,
-    index,
-  }: {
-    item: IGetSectionData | null;
-    index: number;
-  }) => {
-    if (!item) return null;
+  const renderItem = useCallback(
+    ({ item, index }: { item: IGetSectionData | null; index: number }) => {
+      if (!item) return null;
 
-    const isDummy = item?._id?.startsWith('dummy');
-    const isLoadingItem = isLoading?.section || isDummy;
+      const isDummy = item?._id?.startsWith('dummy');
+      const isLoadingItem = isLoading?.section || isDummy;
 
-    if ((isDummy || isLoading?.section) && LoaderComponent) {
-      return LoaderComponent;
-    }
+      if ((isDummy || isLoading?.section) && LoaderComponent) {
+        return LoaderComponent;
+      }
 
-    return (
-      <SectionType
-        key={index}
-        index={index}
-        type={item?.type || 'normal'}
-        data={{
-          sectionData: item.content || null,
-          historyData: contentData.historyData,
-          category: contentData.category,
-        }}
-        name={item?.name || `Section ${index}`}
-        theme={theme}
-        customComponents={customComponents}
-        section_id={item?._id || index.toString()}
-        events={events}
-        isLoading={{
-          section: isLoadingItem,
-          history: isLoading?.history,
-          category: isLoading?.category,
-        }}
-        sectionProps={sectionProps}
-        moreFetchDataHistory={moreFetchDataHistory}
-        moreFetchData={moreFetchData}
-      />
-    );
-  };
+      return (
+        <SectionType
+          key={index}
+          index={index}
+          type={item?.type || 'normal'}
+          data={{
+            sectionData: item.content || null,
+            ...sectionDataMemo,
+          }}
+          name={item?.name || `Section ${index}`}
+          theme={theme}
+          customComponents={customComponents}
+          section_id={item?._id || index.toString()}
+          events={events}
+          isLoading={{
+            ...loadingStateMemo,
+            section: isLoadingItem,
+          }}
+          sectionProps={sectionProps}
+          moreFetchDataHistory={moreFetchDataHistory}
+          moreFetchData={moreFetchData}
+        />
+      );
+    },
+    [
+      isLoading,
+      LoaderComponent,
+      sectionDataMemo,
+      loadingStateMemo,
+      theme,
+      customComponents,
+      events,
+      sectionProps,
+      moreFetchDataHistory,
+      moreFetchData,
+    ]
+  );
 
-  const isEmpty =
-    !isLoading?.section && (!sectionData || sectionData.length === 0);
+  const isEmpty = useMemo(
+    () => !isLoading?.section && (!sectionData || sectionData.length === 0),
+    [isLoading?.section, sectionData]
+  );
+
+  const keyExtractor = useCallback(
+    (_item: IGetSectionData, index: number) => index.toString(),
+    []
+  );
+
+  const handleEndReached = useCallback(() => {
+    onEndReached?.();
+  }, [onEndReached]);
+
+  const contentContainerStyleMemo = useMemo(
+    () => [
+      { paddingBottom: verticalScale(100) + insets.bottom },
+      contentContainerStyle,
+    ],
+    [insets.bottom, contentContainerStyle]
+  );
+
+  const listData = useMemo(
+    () => (isLoading?.section ? dummySections : sectionData),
+    [isLoading?.section, sectionData]
+  );
 
   return (
     <AnimatedFlatList
@@ -233,31 +292,39 @@ export const Content: React.FC<IContentProps> = ({
       removeClippedSubviews
       onScroll={onScroll as any}
       scrollEventThrottle={16}
-      data={isLoading?.section ? dummySections : sectionData}
+      data={listData}
       renderItem={renderItem as any}
-      keyExtractor={(_item, index) => index.toString()}
-      onEndReached={() => onEndReached?.()}
+      keyExtractor={keyExtractor}
+      onEndReached={handleEndReached}
       ListHeaderComponent={headerComponent}
-      ListFooterComponent={
-        <ContentFooter
-          InfiniteScrollLoaderComponent={InfiniteScrollLoaderComponent}
-          InfiniteScrollIsLoading={isLoading?.InfiniteScrollIsLoading}
-          isEmpty={isEmpty}
-          ErrorComponent={ErrorComponent}
-          theme={theme}
-          noContentFallbackProps={noContentFallbackProps}
-        />
-      }
+      ListFooterComponent={useMemo(
+        () => (
+          <ContentFooter
+            InfiniteScrollLoaderComponent={InfiniteScrollLoaderComponent}
+            InfiniteScrollIsLoading={isLoading?.InfiniteScrollIsLoading}
+            isEmpty={isEmpty}
+            ErrorComponent={ErrorComponent}
+            theme={theme}
+            noContentFallbackProps={noContentFallbackProps}
+          />
+        ),
+        [
+          InfiniteScrollLoaderComponent,
+          isLoading?.InfiniteScrollIsLoading,
+          isEmpty,
+          ErrorComponent,
+          theme,
+          noContentFallbackProps,
+        ]
+      )}
       onEndReachedThreshold={0.7}
-      contentContainerStyle={[
-        { paddingBottom: verticalScale(100) + insets.bottom },
-
-        contentContainerStyle,
-      ]}
+      contentContainerStyle={contentContainerStyleMemo}
     />
   );
 };
 
+export default React.memo(Content);
+
 export namespace Content {
   export type Props = IContentProps;
   export type Data = Props['contentData'];

package/src/components/Content/Sections.tsx

@@ -2,7 +2,7 @@
  * @author Naresh Dhamu
  * @lastModified Sun 08 Jun 2025 at 03:50 PM
  */
-import React from 'react';
+import React, { useMemo } from 'react';
 import Sliders from './Card/Sliders';
 import Cards from './Card';
 import type { IGetSectionData, MoreFetchData } from '../../types';
@@ -46,13 +46,14 @@ export interface IProps {
   moreFetchDataHistory?: MoreFetchData<IHistoryItem>;
 }
 
-const renderDefaultComponent = (
+// Memoized common props creator to prevent object recreation
+const createCommonProps = (
   type: IGetSectionData['type'],
   props: Omit<IProps, 'customComponents' | 'type'>
-): React.ReactNode => {
+) => {
   const effectiveIsLoading =
     props.isLoading?.section || props.section_id === `dummy-${type}`;
-  const commonProps = {
+  return {
     theme: props.theme,
     title: props.name,
     section_id: props.section_id,
@@ -65,6 +66,13 @@ const renderDefaultComponent = (
     moreFetchDataHistory: props.moreFetchDataHistory,
     moreFetchData: props.moreFetchData,
   };
+};
+
+const renderDefaultComponent = (
+  type: IGetSectionData['type'],
+  props: Omit<IProps, 'customComponents' | 'type'>
+): React.ReactNode => {
+  const commonProps = createCommonProps(type, props);
   switch (type) {
     case 'slider':
       return (
@@ -120,8 +128,85 @@ const Sections: React.FC<IProps> = ({
   moreFetchData,
   moreFetchDataHistory,
 }) => {
-  const commonProps = { data: data.sectionData, title: name };
-  const customComponent = customComponents.find((c) => c.type === type);
+  const commonProps = useMemo(
+    () => ({ data: data.sectionData, title: name }),
+    [data.sectionData, name]
+  );
+
+  const customComponent = useMemo(
+    () => customComponents.find((c) => c.type === type),
+    [customComponents, type]
+  );
+
+  const defaultRendered = useMemo(
+    () =>
+      renderDefaultComponent(type, {
+        data,
+        name,
+        section_id,
+        index,
+        theme,
+        events,
+        sectionProps,
+        isLoading,
+        moreFetchData,
+        moreFetchDataHistory,
+      }),
+    [
+      type,
+      data,
+      name,
+      section_id,
+      index,
+      theme,
+      events,
+      sectionProps,
+      isLoading,
+      moreFetchData,
+      moreFetchDataHistory,
+    ]
+  );
+
+  // Memoize props object to avoid recreating in filter
+  const filterProps = useMemo(
+    () => ({
+      data,
+      name,
+      section_id,
+      index,
+      theme,
+      events,
+      sectionProps,
+      isLoading,
+      moreFetchData,
+      moreFetchDataHistory,
+    }),
+    [
+      data,
+      name,
+      section_id,
+      index,
+      theme,
+      events,
+      sectionProps,
+      isLoading,
+      moreFetchData,
+      moreFetchDataHistory,
+    ]
+  );
+
+  const fallbackComponents = useMemo(
+    () =>
+      customComponents.filter(
+        ({ type: customType }) =>
+          renderDefaultComponent(
+            customType as IGetSectionData['type'],
+            filterProps
+          ) === null
+      ),
+    [customComponents, filterProps]
+  );
+
   if (customComponent) {
     return React.cloneElement(customComponent.component, {
       ...(customComponent.component?.props ?? {}),
@@ -129,48 +214,19 @@ const Sections: React.FC<IProps> = ({
     });
   }
 
-  const defaultRendered = renderDefaultComponent(type, {
-    data,
-    name,
-    section_id,
-    index,
-    theme,
-    events,
-    sectionProps,
-    isLoading,
-    moreFetchData,
-    moreFetchDataHistory,
-  });
-
   if (defaultRendered) return defaultRendered;
 
   return (
     <>
-      {customComponents
-        .filter(
-          ({ type: customType }) =>
-            renderDefaultComponent(customType as IGetSectionData['type'], {
-              data,
-              name,
-              section_id,
-              index,
-              theme,
-              events,
-              sectionProps,
-              isLoading,
-              moreFetchData,
-              moreFetchDataHistory,
-            }) === null
-        )
-        .map(({ component, type: key }) =>
-          React.cloneElement(component, {
-            ...(component?.props ?? {}),
-            key,
-            ...commonProps,
-          })
-        )}
+      {fallbackComponents.map(({ component, type: key }) =>
+        React.cloneElement(component, {
+          ...(component?.props ?? {}),
+          key,
+          ...commonProps,
+        })
+      )}
     </>
   );
 };
 
-export default Sections;
+export default React.memo(Sections);