Fix primefaces#5202: Calendar rendering performance increase

melloware · Nov 28, 2023 · bba57f6 · bba57f6
1 parent 05f9124
commit bba57f6
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 15 deletions.
diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js
@@ -2952,12 +2952,7 @@ export const Calendar = React.memo(
                 })
             );
 
-            return (
-                <span {...dayLabelProps}>
-                    {content}
-                    <Ripple />
-                </span>
-            );
+            return <span {...dayLabelProps}>{content}</span>;
         };
 
         const createWeek = (weekDates, weekNumber, groupIndex) => {

diff --git a/components/lib/hooks/useStyle.js b/components/lib/hooks/useStyle.js
@@ -17,7 +17,7 @@ export const useStyle = (css, options = {}) => {
     };
 
     const load = () => {
-        if (!document) return;
+        if (!document || isLoaded) return;
 
         styleRef.current = document.querySelector(`style[data-primereact-style-id="${name}"]`) || document.getElementById(id) || document.createElement('style');
 
@@ -31,8 +31,6 @@ export const useStyle = (css, options = {}) => {
             name && styleRef.current.setAttribute('data-primereact-style-id', name);
         }
 
-        if (isLoaded) return;
-
         styleRef.current.textContent = css;
 
         setIsLoaded(true);
@@ -50,7 +48,7 @@ export const useStyle = (css, options = {}) => {
 
         // return () => {if (!manual) unload()}; /* @todo */
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [manual]);
 
     return {
         id,

diff --git a/components/lib/ripple/Ripple.js b/components/lib/ripple/Ripple.js
@@ -10,17 +10,16 @@ export const Ripple = React.memo(
         const targetRef = React.useRef(null);
         const context = React.useContext(PrimeReactContext);
         const props = RippleBase.getProps(inProps, context);
-
+        const isRippleActive = (context && context.ripple) || PrimeReact.ripple;
         const metaData = {
             props
         };
-
-        useStyle(RippleBase.css.styles, { name: 'ripple' });
-
         const { ptm, cx } = RippleBase.setMetaData({
             ...metaData
         });
 
+        useStyle(RippleBase.css.styles, { name: 'ripple', manual: !isRippleActive });
+
         const getTarget = () => {
             return inkRef.current && inkRef.current.parentElement;
         };
@@ -101,6 +100,8 @@ export const Ripple = React.memo(
             }
         });
 
+        if (!isRippleActive) return null;
+
         const rootProps = mergeProps(
             {
                 'aria-hidden': true,
@@ -110,7 +111,7 @@ export const Ripple = React.memo(
             ptm('root')
         );
 
-        return (context && context.ripple) || PrimeReact.ripple ? <span role="presentation" ref={inkRef} {...rootProps} onAnimationEnd={onAnimationEnd}></span> : null;
+        return <span role="presentation" ref={inkRef} {...rootProps} onAnimationEnd={onAnimationEnd}></span>;
     })
 );