[airflow] 01/01: Reduce rerendering of component

[bb...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

bbovenzi pushed a commit to branch memoize-dag-run-bar
in repository https://gitbox.apache.org/repos/asf/airflow.git

commit e650f75a63e165b357a382bceae75660035b81d3
Author: Brent Bovenzi <br...@gmail.com>
AuthorDate: Thu Mar 10 14:02:54 2022 -0500

    Reduce rerendering of component
    
    Memoize component with a custom compare function to reduce rerenders
---
 airflow/www/static/js/tree/dagRuns/Bar.jsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/airflow/www/static/js/tree/dagRuns/Bar.jsx b/airflow/www/static/js/tree/dagRuns/Bar.jsx
index a0fa5b1..21f99a3 100644
--- a/airflow/www/static/js/tree/dagRuns/Bar.jsx
+++ b/airflow/www/static/js/tree/dagRuns/Bar.jsx
@@ -109,4 +109,17 @@ const DagRunBar = ({
   );
 };
 
-export default DagRunBar;
+// The default equality function is a shallow comparison and json objects will return false
+// This custom compare function allows us to do a deeper comparison
+const compareProps = (
+  prevProps,
+  nextProps,
+) => (
+  JSON.stringify(prevProps.run) === JSON.stringify(nextProps.run)
+  && prevProps.max === nextProps.max
+  && prevProps.index === nextProps.index
+  && prevProps.totalRuns === nextProps.totalRuns
+  && prevProps.containerRef === nextProps.containerRef
+);
+
+export default React.memo(DagRunBar, compareProps);