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:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user