diff --git a/.github/workflows/pr-build-check.yml b/.github/workflows/pr-build-check.yml
new file mode 100644
index 0000000..358ff2a
--- /dev/null
+++ b/.github/workflows/pr-build-check.yml
@@ -0,0 +1,36 @@
+name: PR Build Check
+
+# Run this workflow on pull requests to validate the build
+on:
+  pull_request:
+    branches: [cwbi-dev]
+    types: [opened, synchronize, reopened]
+
+jobs:
+  build-check:
+    name: Build React App
+    runs-on: ubuntu-latest
+    
+    steps:
+      # Step 1: Clone the repository
+      - name: Git clone the repository
+        uses: actions/checkout@v3
+
+      # Step 2: Set up Node.js (React app requires Node.js)
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 'node' # Use the latest version of Node.js
+
+      # Step 3: Install dependencies
+      - name: Install Dependencies
+        run: npm install
+
+      # Step 4: Build the React app for production
+      - name: Build React App
+        run: npm run build
+        env:
+          REACT_APP_AUTH_HOST: https://identityc-test.cwbi.us/auth
+          REACT_APP_AUTH_REDIRECT_URL: https://cumulus.dev.cwbi.us
+          REACT_APP_CUMULUS_API_URL: https://cumulus.dev.cwbi.us/api
+          REACT_APP_ISDEVELOPMENT: true
\ No newline at end of file
diff --git a/src/app-components/modals/availability-modal.js b/src/app-components/modals/availability-modal.js
index 978943d..5d7fdc9 100644
--- a/src/app-components/modals/availability-modal.js
+++ b/src/app-components/modals/availability-modal.js
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { connect } from 'redux-bundler-react';
 import { Switch } from '@headlessui/react';
 import { format, addDays, subDays } from 'date-fns';
@@ -83,7 +83,7 @@ const fileList = (files, missingOnly = false) => {
   const filteredFiles = files.filter((f) => !missingOnly || !f.is_available);
 
   return (
-    <ul role='list' className='divide-y divide-gray-200 border-t'>
+    <ul className='divide-y divide-gray-200 border-t'>
       {filteredFiles.map((file, index) => (
         <li
           key={`file-item-${index}`}
@@ -113,29 +113,32 @@ export default connect('doModalClose', ({ doModalClose, product, date }) => {
   const [files, setFiles] = useState([]);
   const [showMissing, setShowMissing] = useState(false);
 
-  // Initialize the component.
-  useEffect(() => {
-    fetchData(date);
-  }, []);
-
   /**
    * Make a request for the file availability data.
    * @date {datetime} - The date for the data request.
    */
-  const fetchData = (date) => {
-    // Update the current date.
-    setCurrDate(date);
-
-    // Fetch the availability data and then update the files list.
-    const safeDate = date instanceof Date ? date : new Date(date);
-    const url = `${CUMULUS_API_URL}/products/${
-      product.id
-    }/file-availability?date=${safeDate.toISOString()}`;
-
-    fetch(url)
-      .then((response) => response.json())
-      .then(setFiles);
-  };
+  const fetchData = useCallback(
+    (date) => {
+      // Update the current date.
+      setCurrDate(date);
+
+      // Fetch the availability data and then update the files list.
+      const safeDate = date instanceof Date ? date : new Date(date);
+      const url = `${CUMULUS_API_URL}/products/${
+        product.id
+      }/file-availability?date=${safeDate.toISOString()}`;
+
+      fetch(url)
+        .then((response) => response.json())
+        .then(setFiles);
+    },
+    [product.id]
+  );
+
+  // Initialize the component.
+  useEffect(() => {
+    fetchData(date);
+  }, [date, fetchData]);
 
   // Display the modal header.
   const header = () => {
diff --git a/src/app-pages/products/product-details/product-availability.js b/src/app-pages/products/product-details/product-availability.js
index 931aa56..4451e77 100644
--- a/src/app-pages/products/product-details/product-availability.js
+++ b/src/app-pages/products/product-details/product-availability.js
@@ -19,7 +19,7 @@ export default connect(
       (date) => {
         doModalOpen(AvailabilityModal, { product, date });
       },
-      [doModalOpen],
+      [doModalOpen, product]
     );
 
     return (
diff --git a/src/app-pages/products/product-details/water-year-heatmap.js b/src/app-pages/products/product-details/water-year-heatmap.js
index bb8e49d..fcb0163 100644
--- a/src/app-pages/products/product-details/water-year-heatmap.js
+++ b/src/app-pages/products/product-details/water-year-heatmap.js
@@ -87,7 +87,7 @@ export default function WaterYearHeatMap({ year = 2022, data, onclick }) {
     });
     elRef.current.append(Chart);
     return () => Chart.remove();
-  }, [elRef, data, ticks, width]);
+  }, [elRef, data, ticks, width, onclick]);
 
   return (
     <div className='w-full'>