diff --git a/frontend/public/src/components/CourseProductDetailEnroll.js b/frontend/public/src/components/CourseProductDetailEnroll.js
index 308c134fa4..7878d14953 100644
--- a/frontend/public/src/components/CourseProductDetailEnroll.js
+++ b/frontend/public/src/components/CourseProductDetailEnroll.js
@@ -67,7 +67,7 @@ type ProductDetailState = {
   destinationUrl: string
 }
 
-export class CourseProductDetailEnroll extends React.Component<
+export class CourseProductDetailEnroll extends React.PureComponent<
   Props,
   ProductDetailState
 > {
@@ -79,6 +79,28 @@ export class CourseProductDetailEnroll extends React.Component<
     destinationUrl:                    ""
   }
 
+  constructor(props: Props) {
+    super(props)
+
+    // Bind methods to avoid creating new functions on every render
+    this.toggleAddlProfileFieldsModal = this.toggleAddlProfileFieldsModal.bind(this)
+    this.toggleCartConfirmationDialogVisibility = this.toggleCartConfirmationDialogVisibility.bind(this)
+    this.onAddToCartClick = this.onAddToCartClick.bind(this)
+    this.redirectToCourseHomepage = this.redirectToCourseHomepage.bind(this)
+    this.saveProfile = this.saveProfile.bind(this)
+    this.cancelEnrollment = this.cancelEnrollment.bind(this)
+
+    // Initialize memoization cache
+    this._computedCourseDataCache = null
+    this._lastCoursesRef = null
+  }
+
+  componentWillUnmount() {
+    // Clean up cache references to prevent memory leaks
+    this._computedCourseDataCache = null
+    this._lastCoursesRef = null
+  }
+
   toggleAddlProfileFieldsModal() {
     this.setState({
       showAddlProfileFieldsModal: !this.state.showAddlProfileFieldsModal
@@ -95,6 +117,7 @@ export class CourseProductDetailEnroll extends React.Component<
       window.open(target, "_blank")
     }
   }
+
   toggleCartConfirmationDialogVisibility() {
     this.setState({
       addedToCartDialogVisibility: !this.state.addedToCartDialogVisibility
@@ -203,6 +226,56 @@ export class CourseProductDetailEnroll extends React.Component<
     })
   }
 
+  // Memoize expensive computations to avoid recalculation on every render
+  getComputedCourseData = () => {
+    const { courses } = this.props
+
+    // Return cached result if courses haven't changed
+    if (this._lastCoursesRef === courses && this._computedCourseDataCache) {
+      return this._computedCourseDataCache
+    }
+
+    const courseRuns = courses && courses[0] ? courses[0].courseruns : null
+    const course = courses && courses[0] ? courses[0] : null
+
+    const enrollableCourseRuns = courseRuns ?
+      courseRuns.filter(
+        (run: EnrollmentFlaggedCourseRun) => run.is_enrollable
+      ) :
+      []
+
+    const upgradableCourseRuns = enrollableCourseRuns.filter(
+      (run: EnrollmentFlaggedCourseRun) => run.is_upgradable
+    )
+
+    let run = null
+    let product = null
+
+    if (courses && courseRuns) {
+      run = getFirstRelevantRun(courses[0], courseRuns)
+      if (run) {
+        product = run && run.products ? run.products[0] : null
+        this.updateDate(run)
+      }
+    }
+
+    const computedData = {
+      course,
+      courseRuns,
+      enrollableCourseRuns,
+      upgradableCourseRuns,
+      run,
+      product,
+      hasMultipleEnrollableRuns: enrollableCourseRuns && enrollableCourseRuns.length > 1
+    }
+
+    // Cache the result
+    this._computedCourseDataCache = computedData
+    this._lastCoursesRef = courses
+
+    return computedData
+  }
+
   renderRunSelectorButtons(
     enrollableCourseRuns: Array<EnrollmentFlaggedCourseRun>
   ) {
@@ -216,7 +289,7 @@ export class CourseProductDetailEnroll extends React.Component<
           </label>
         )}
         <select
-          onChange={this.hndSetCourseRun.bind(this)}
+          onChange={this.hndSetCourseRun}
           className="form-control"
         >
           <option value="default" key="default-select">
@@ -269,16 +342,17 @@ export class CourseProductDetailEnroll extends React.Component<
     const { courses } = this.props
     const { addedToCartDialogVisibility } = this.state
     const course = courses && courses[0] ? courses[0] : null
+
     return (
       <Modal
-        id={`added-to-cart-dialog`}
+        id="added-to-cart-dialog"
         className="added-to-cart-modal"
         isOpen={addedToCartDialogVisibility}
-        toggle={() => this.toggleCartConfirmationDialogVisibility()}
+        toggle={this.toggleCartConfirmationDialogVisibility}
         centered
       >
         <ModalHeader
-          toggle={() => this.toggleCartConfirmationDialogVisibility()}
+          toggle={this.toggleCartConfirmationDialogVisibility}
         >
           Added to Cart
         </ModalHeader>
@@ -316,20 +390,27 @@ export class CourseProductDetailEnroll extends React.Component<
 
   renderUpgradeEnrollmentDialog() {
     const { courses, currentUser } = this.props
-    const courseRuns = courses && courses[0] ? courses[0].courseruns : null
-    const enrollableCourseRuns = courseRuns ?
-      courseRuns.filter(
-        (run: EnrollmentFlaggedCourseRun) => run.is_enrollable
-      ) :
-      []
-    const upgradableCourseRuns = enrollableCourseRuns.filter(
-      (run: EnrollmentFlaggedCourseRun) => run.is_upgradable
-    )
+    const { upgradeEnrollmentDialogVisibility } = this.state
+
+    // Use memoized computation
+    const {
+      course,
+      enrollableCourseRuns,
+      upgradableCourseRuns
+    } = this.getComputedCourseData()
+
     if (upgradableCourseRuns.length < 1 && enrollableCourseRuns.length < 1) {
       return null
     }
-    const course = courses && courses[0] ? courses[0] : null
+
     const run = this.getCurrentCourseRun()
+    const product = run && run.products ? run.products[0] : null
+    const newCartDesign = checkFeatureFlag(
+      "new-cart-design",
+      currentUser && currentUser.id ? currentUser.id : "anonymousUser"
+    )
+    const canUpgrade = !!(run && run.is_upgradable && product)
+
     const needFinancialAssistanceLink =
       run &&
       course &&
@@ -345,23 +426,17 @@ export class CourseProductDetailEnroll extends React.Component<
           Need financial assistance?
           </a>
         ) : null
-    const { upgradeEnrollmentDialogVisibility } = this.state
-    const product = run && run.products ? run.products[0] : null
-    const newCartDesign = checkFeatureFlag(
-      "new-cart-design",
-      currentUser && currentUser.id ? currentUser.id : "anonymousUser"
-    )
-    const canUpgrade = !!(run && run.is_upgradable && product)
+
     return upgradableCourseRuns.length > 0 ||
       enrollableCourseRuns.length > 1 ? (
         <Modal
-          id={`upgrade-enrollment-dialog`}
+          id="upgrade-enrollment-dialog"
           className="upgrade-enrollment-modal"
           isOpen={upgradeEnrollmentDialogVisibility}
-          toggle={() => this.cancelEnrollment()}
+          toggle={this.cancelEnrollment}
           centered
         >
-          <ModalHeader toggle={() => this.cancelEnrollment()}>
+          <ModalHeader toggle={this.cancelEnrollment}>
             {course && course.title}
           </ModalHeader>
           <ModalBody>
@@ -440,7 +515,7 @@ export class CourseProductDetailEnroll extends React.Component<
                     <div className="col-md-6 col-sm-12 pr-0">
                       <div className="new-design">
                         <button
-                          onClick={this.onAddToCartClick.bind(this)}
+                          onClick={this.onAddToCartClick}
                           type="button"
                           className="btn btn-upgrade btn-gradient-red-to-blue"
                           disabled={!canUpgrade}
@@ -497,14 +572,14 @@ export class CourseProductDetailEnroll extends React.Component<
 
     return (
       <Modal
-        id={`upgrade-enrollment-dialog`}
+        id="upgrade-enrollment-dialog"
         className="upgrade-enrollment-modal"
         isOpen={showAddlProfileFieldsModal}
-        toggle={() => this.toggleAddlProfileFieldsModal()}
+        toggle={this.toggleAddlProfileFieldsModal}
       >
         <ModalHeader
           id={`more-info-modal-${currentUser.id}`}
-          toggle={() => this.toggleAddlProfileFieldsModal()}
+          toggle={this.toggleAddlProfileFieldsModal}
         >
           Provide More Info
         </ModalHeader>
@@ -518,8 +593,8 @@ export class CourseProductDetailEnroll extends React.Component<
             </div>
           </div>
           <AddlProfileFieldsForm
-            onSubmit={this.saveProfile.bind(this)}
-            onCancel={() => this.toggleAddlProfileFieldsModal()}
+            onSubmit={this.saveProfile}
+            onCancel={this.toggleAddlProfileFieldsModal}
             user={currentUser}
             countries={countries}
           ></AddlProfileFieldsForm>
@@ -573,7 +648,7 @@ export class CourseProductDetailEnroll extends React.Component<
           <button
             id="upgradeEnrollBtn"
             className="btn btn-primary btn-enrollment-button btn-lg btn-gradient-red-to-blue highlight enroll-now"
-            onClick={() => this.toggleUpgradeDialogVisibility()}
+            onClick={this.toggleUpgradeDialogVisibility}
             disabled={!run.is_enrollable}
           >
             Enroll now
@@ -597,24 +672,14 @@ export class CourseProductDetailEnroll extends React.Component<
 
   render() {
     const { courses, courseIsLoading, currentUser } = this.props
-    let run,
-      product = null
-    const courseRuns = courses && courses[0] ? courses[0].courseruns : null
-    const enrollableCourseRuns = courseRuns ?
-      courseRuns.filter(
-        (run: EnrollmentFlaggedCourseRun) => run.is_enrollable
-      ) :
-      []
-    if (courses && courseRuns) {
-      run = getFirstRelevantRun(courses[0], courseRuns)
 
-      if (run) {
-        product = run && run.products ? run.products[0] : null
-        this.updateDate(run)
-      }
-    }
-    const hasMultipleEnrollableRuns =
-      enrollableCourseRuns && enrollableCourseRuns.length > 1
+    // Use memoized computation to avoid repeated calculations
+    const {
+      run,
+      product,
+      enrollableCourseRuns,
+      hasMultipleEnrollableRuns
+    } = this.getComputedCourseData()
 
     return (
       <>
diff --git a/frontend/public/src/containers/pages/DashboardPage.js b/frontend/public/src/containers/pages/DashboardPage.js
index c85c1a3ba4..7ee3ea9efe 100644
--- a/frontend/public/src/containers/pages/DashboardPage.js
+++ b/frontend/public/src/containers/pages/DashboardPage.js
@@ -67,7 +67,7 @@ type DashboardPageState = {
   destinationUrl: string
 }
 
-export class DashboardPage extends React.Component<
+export class DashboardPage extends React.PureComponent<
   DashboardPageProps,
   DashboardPageState
 > {
@@ -79,6 +79,30 @@ export class DashboardPage extends React.Component<
     destinationUrl:             ""
   }
 
+  constructor(props: DashboardPageProps) {
+    super(props)
+
+    // Bind methods to avoid creating new functions on every render
+    this.toggleDrawer = this.toggleDrawer.bind(this)
+    this.updateDrawerEnrollments = this.updateDrawerEnrollments.bind(this)
+    this.toggleTab = this.toggleTab.bind(this)
+    this.toggleAddlProfileFieldsModal = this.toggleAddlProfileFieldsModal.bind(this)
+    this.redirectToCourseHomepage = this.redirectToCourseHomepage.bind(this)
+    this.saveProfile = this.saveProfile.bind(this)
+    this.renderCurrentTab = this.renderCurrentTab.bind(this)
+    this.renderAddlProfileFieldsModal = this.renderAddlProfileFieldsModal.bind(this)
+
+    // Cache for computed values
+    this._tabClassesCache = null
+    this._lastCurrentTab = null
+  }
+
+  componentWillUnmount() {
+    // Clean up cache references to prevent memory leaks
+    this._tabClassesCache = null
+    this._lastCurrentTab = null
+  }
+
   toggleDrawer(enrollment: any) {
     this.setState({
       programDrawerEnrollments: enrollment,
@@ -92,6 +116,7 @@ export class DashboardPage extends React.Component<
     if (
       programDrawerEnrollments !== null &&
       programDrawerEnrollments.program &&
+      enrollment?.program &&
       programDrawerEnrollments.program.id === enrollment.program.id
     ) {
       this.setState({
@@ -119,19 +144,44 @@ export class DashboardPage extends React.Component<
       this.setState({
         destinationUrl: ""
       })
-      window.open(target, "_blank")
+      try {
+        window.open(target, "_blank")
+      } catch (error) {
+        console.error("Failed to open window:", error)
+        // Fallback to location.href if popup is blocked
+        window.location.href = target
+      }
     }
   }
 
-  redirectToCourseHomepage(url: string, ev: any) {
-    /*
-    If we've got addl_field_flag, then display the extra info modal. Otherwise,
-    send the learner directly to the page.
-    */
+  // Memoize tab classes computation to avoid recalculation on every render
+  getTabClasses = () => {
+    const { currentTab } = this.state
 
-    const { currentUser } = this.props
+    // Return cached result if currentTab hasn't changed
+    if (this._lastCurrentTab === currentTab && this._tabClassesCache) {
+      return this._tabClassesCache
+    }
 
-    if (
+    const myCourseClasses = `dash-tab${
+      currentTab === DashboardTab.courses ? " active" : ""
+    }`
+    const programsClasses = `dash-tab${
+      currentTab === DashboardTab.programs ? " active" : ""
+    }`
+
+    const classes = { myCourseClasses, programsClasses }
+
+    // Cache the result
+    this._tabClassesCache = classes
+    this._lastCurrentTab = currentTab
+
+    return classes
+  }
+
+  // Optimize user profile validation
+  shouldShowProfileModal = (currentUser: User): boolean => {
+    return !(
       currentUser &&
       currentUser.legal_address &&
       currentUser.legal_address.country !== "" &&
@@ -139,11 +189,29 @@ export class DashboardPage extends React.Component<
       currentUser.user_profile &&
       currentUser.user_profile.year_of_birth !== "" &&
       currentUser.user_profile.year_of_birth !== null
-    ) {
+    )
+  }
+
+  redirectToCourseHomepage(url: string, ev: any) {
+    /*
+    If we've got addl_field_flag, then display the extra info modal. Otherwise,
+    send the learner directly to the page.
+    */
+
+    const { currentUser } = this.props
+
+    if (!url || typeof url !== 'string') {
+      console.error("Invalid URL provided to redirectToCourseHomepage:", url)
       return
     }
 
-    ev.preventDefault()
+    if (!this.shouldShowProfileModal(currentUser)) {
+      return
+    }
+
+    if (ev && typeof ev.preventDefault === 'function') {
+      ev.preventDefault()
+    }
 
     this.setState({
       destinationUrl:             url,
@@ -164,21 +232,26 @@ export class DashboardPage extends React.Component<
 
   renderCurrentTab() {
     const { enrollments, programEnrollments, forceRequest } = this.props
+    const { currentTab } = this.state
+
+    // Defensive checks for data
+    const safeEnrollments = enrollments || []
+    const safeProgramEnrollments = programEnrollments || []
 
-    if (this.state.currentTab === DashboardTab.programs) {
-      if (programEnrollments.length === 0) {
+    if (currentTab === DashboardTab.programs) {
+      if (safeProgramEnrollments.length === 0) {
         this.setState({ currentTab: DashboardTab.courses })
       } else {
         return (
           <div>
             <h2 className="hide-element">Programs</h2>
             <EnrolledProgramList
-              key={"enrolled-programs"}
-              enrollments={programEnrollments}
-              toggleDrawer={this.toggleDrawer.bind(this)}
-              onUpdateDrawerEnrollment={this.updateDrawerEnrollments.bind(this)}
+              key="enrolled-programs"
+              enrollments={safeProgramEnrollments}
+              toggleDrawer={this.toggleDrawer}
+              onUpdateDrawerEnrollment={this.updateDrawerEnrollments}
               onUnenroll={forceRequest}
-            ></EnrolledProgramList>
+            />
           </div>
         )
       }
@@ -188,11 +261,11 @@ export class DashboardPage extends React.Component<
       <div>
         <h2 className="hide-element">My Courses</h2>
         <EnrolledCourseList
-          key={"enrolled-courses"}
-          enrollments={enrollments}
-          redirectToCourseHomepage={this.redirectToCourseHomepage.bind(this)}
+          key="enrolled-courses"
+          enrollments={safeEnrollments}
+          redirectToCourseHomepage={this.redirectToCourseHomepage}
           onUnenroll={forceRequest}
-        ></EnrolledCourseList>
+        />
       </div>
     )
   }
@@ -201,16 +274,21 @@ export class DashboardPage extends React.Component<
     const { currentUser, countries } = this.props
     const { showAddlProfileFieldsModal } = this.state
 
+    // Defensive check for required props
+    if (!currentUser || !countries) {
+      return null
+    }
+
     return (
       <Modal
-        id={`upgrade-enrollment-dialog`}
+        id="upgrade-enrollment-dialog"
         className="upgrade-enrollment-modal"
         isOpen={showAddlProfileFieldsModal}
-        toggle={() => this.toggleAddlProfileFieldsModal()}
+        toggle={this.toggleAddlProfileFieldsModal}
       >
         <ModalHeader
           id={`more-info-modal-${currentUser.id}`}
-          toggle={() => this.toggleAddlProfileFieldsModal()}
+          toggle={this.toggleAddlProfileFieldsModal}
         >
           Provide More Info
         </ModalHeader>
@@ -222,11 +300,11 @@ export class DashboardPage extends React.Component<
           </div>
 
           <AddlProfileFieldsForm
-            onSubmit={this.saveProfile.bind(this)}
-            onCancel={() => this.toggleAddlProfileFieldsModal()}
+            onSubmit={this.saveProfile}
+            onCancel={this.toggleAddlProfileFieldsModal}
             user={currentUser}
             countries={countries}
-          ></AddlProfileFieldsForm>
+          />
         </ModalBody>
       </Modal>
     )
@@ -235,16 +313,18 @@ export class DashboardPage extends React.Component<
   render() {
     const { isLoading, programEnrollments, forceRequest } = this.props
 
-    const myCourseClasses = `dash-tab${
-      this.state.currentTab === DashboardTab.courses ? " active" : ""
-    }`
-    const programsClasses = `dash-tab${
-      this.state.currentTab === DashboardTab.programs ? " active" : ""
-    }`
+    // Use memoized tab classes computation
+    const { myCourseClasses, programsClasses } = this.getTabClasses()
+
     const programEnrollmentsLength = programEnrollments ?
       programEnrollments.length :
       0
 
+    // Create stable references for event handlers
+    const handleCoursesTabClick = () => this.toggleTab(DashboardTab.courses)
+    const handleProgramsTabClick = () => this.toggleTab(DashboardTab.programs)
+    const handleDrawerShow = () => this.setState({ programDrawerVisibility: false })
+
     return (
       <DocumentTitle title={`${SETTINGS.site_name} | ${DASHBOARD_PAGE_TITLE}`}>
         <>
@@ -258,7 +338,7 @@ export class DashboardPage extends React.Component<
                   <>
                     <button
                       className={myCourseClasses}
-                      onClick={() => this.toggleTab(DashboardTab.courses)}
+                      onClick={handleCoursesTabClick}
                     >
                       My Courses
                     </button>
@@ -267,13 +347,13 @@ export class DashboardPage extends React.Component<
                   <>
                     <button
                       className={myCourseClasses}
-                      onClick={() => this.toggleTab(DashboardTab.courses)}
+                      onClick={handleCoursesTabClick}
                     >
                       My Courses
                     </button>
                     <button
                       className={programsClasses}
-                      onClick={() => this.toggleTab(DashboardTab.programs)}
+                      onClick={handleProgramsTabClick}
                     >
                       My Programs
                     </button>
@@ -287,12 +367,10 @@ export class DashboardPage extends React.Component<
               <ProgramEnrollmentDrawer
                 isHidden={this.state.programDrawerVisibility}
                 enrollment={this.state.programDrawerEnrollments}
-                showDrawer={() =>
-                  this.setState({ programDrawerVisibility: false })
-                }
+                showDrawer={handleDrawerShow}
                 redirectToCourseHomepage={this.redirectToCourseHomepage}
                 onUnenroll={forceRequest}
-              ></ProgramEnrollmentDrawer>
+              />
 
               {this.renderAddlProfileFieldsModal()}
             </Loader>