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>
This commit is contained in:
2026-01-25 06:35:41 +01:00
co-authored by Claude Sonnet 4.5
parent 9bca232ca7
commit 200c204692
+9 -9
View File
@@ -1,6 +1,6 @@
'use client'; 'use client';
import { useState, useRef, useEffect } from 'react'; import { useState, useRef, useEffect, useCallback } from 'react';
import { useTranslations } from 'next-intl'; import { useTranslations } from 'next-intl';
import { motion, AnimatePresence } from 'framer-motion'; import { motion, AnimatePresence } from 'framer-motion';
@@ -32,15 +32,15 @@ const Experience = () => {
const totalPages = Math.ceil((Array.isArray(experiences) ? experiences.length : 0) / itemsPerPage); 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); setTouchStart(e.touches[0].clientX);
}; }, []);
const handleTouchMove = (e: React.TouchEvent) => { const handleTouchMove = useCallback((e: React.TouchEvent) => {
setTouchEnd(e.touches[0].clientX); setTouchEnd(e.touches[0].clientX);
}; }, []);
const handleTouchEnd = () => { const handleTouchEnd = useCallback(() => {
if (!touchStart || !touchEnd) return; if (!touchStart || !touchEnd) return;
const distance = touchStart - touchEnd; const distance = touchStart - touchEnd;
@@ -56,13 +56,13 @@ const Experience = () => {
setTouchStart(null); setTouchStart(null);
setTouchEnd(null); setTouchEnd(null);
}; }, [touchStart, touchEnd, currentPage, totalPages]);
const getCurrentPageItems = () => { const getCurrentPageItems = useCallback(() => {
if (!Array.isArray(experiences)) return []; if (!Array.isArray(experiences)) return [];
const startIndex = currentPage * itemsPerPage; const startIndex = currentPage * itemsPerPage;
return experiences.slice(startIndex, startIndex + itemsPerPage); return experiences.slice(startIndex, startIndex + itemsPerPage);
}; }, [experiences, currentPage, itemsPerPage]);
return ( return (
<section id="experience" className="py-12 md:py-24 overflow-hidden"> <section id="experience" className="py-12 md:py-24 overflow-hidden">