From 200c204692356ce3999db7457dee397d15db6a4a Mon Sep 17 00:00:00 2001
From: Damjan Savic <info@damjan-savic.com>
Date: Sun, 25 Jan 2026 06:35:41 +0100
Subject: [PATCH] auto-claude: subtask-3-1 - Memoize touch handlers and
 getCurrentPageItems in Experience.tsx

- Added useCallback import from react
- Memoized handleTouchStart with empty dependency array
- Memoized handleTouchMove with empty dependency array
- Memoized handleTouchEnd with dependencies [touchStart, touchEnd, currentPage, totalPages]
- Memoized getCurrentPageItems with dependencies [experiences, currentPage, itemsPerPage]
- Follows patterns from BlogPost.tsx and ScrollContext.tsx reference files

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/components/sections/Experience.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/sections/Experience.tsx b/src/components/sections/Experience.tsx
index ea14425..2f19a21 100644
--- a/src/components/sections/Experience.tsx
+++ b/src/components/sections/Experience.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, useCallback } from 'react';
 import { useTranslations } from 'next-intl';
 import { motion, AnimatePresence } from 'framer-motion';
 
@@ -32,15 +32,15 @@ const Experience = () => {
 
   const totalPages = Math.ceil((Array.isArray(experiences) ? experiences.length : 0) / itemsPerPage);
 
-  const handleTouchStart = (e: React.TouchEvent) => {
+  const handleTouchStart = useCallback((e: React.TouchEvent) => {
     setTouchStart(e.touches[0].clientX);
-  };
+  }, []);
 
-  const handleTouchMove = (e: React.TouchEvent) => {
+  const handleTouchMove = useCallback((e: React.TouchEvent) => {
     setTouchEnd(e.touches[0].clientX);
-  };
+  }, []);
 
-  const handleTouchEnd = () => {
+  const handleTouchEnd = useCallback(() => {
     if (!touchStart || !touchEnd) return;
 
     const distance = touchStart - touchEnd;
@@ -56,13 +56,13 @@ const Experience = () => {
 
     setTouchStart(null);
     setTouchEnd(null);
-  };
+  }, [touchStart, touchEnd, currentPage, totalPages]);
 
-  const getCurrentPageItems = () => {
+  const getCurrentPageItems = useCallback(() => {
     if (!Array.isArray(experiences)) return [];
     const startIndex = currentPage * itemsPerPage;
     return experiences.slice(startIndex, startIndex + itemsPerPage);
-  };
+  }, [experiences, currentPage, itemsPerPage]);
 
   return (
     <section id="experience" className="py-12 md:py-24 overflow-hidden">