54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
import { useEffect, useCallback, useRef } from 'react';
|
|
|
|
export const usePerformanceOptimization = () => {
|
|
const animationFrameRef = useRef<number>();
|
|
const timeoutRef = useRef<NodeJS.Timeout>();
|
|
|
|
// Debounce function for expensive operations
|
|
const debounce = useCallback((func: Function, delay: number) => {
|
|
return (...args: any[]) => {
|
|
if (timeoutRef.current) {
|
|
clearTimeout(timeoutRef.current);
|
|
}
|
|
timeoutRef.current = setTimeout(() => func(...args), delay);
|
|
};
|
|
}, []);
|
|
|
|
// Throttle function for scroll/resize events
|
|
const throttle = useCallback((func: Function, delay: number) => {
|
|
let lastCall = 0;
|
|
return (...args: any[]) => {
|
|
const now = Date.now();
|
|
if (now - lastCall >= delay) {
|
|
lastCall = now;
|
|
func(...args);
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
// Optimize animations with requestAnimationFrame
|
|
const smoothAnimation = useCallback((callback: () => void) => {
|
|
if (animationFrameRef.current) {
|
|
cancelAnimationFrame(animationFrameRef.current);
|
|
}
|
|
animationFrameRef.current = requestAnimationFrame(callback);
|
|
}, []);
|
|
|
|
// Cleanup on unmount
|
|
useEffect(() => {
|
|
return () => {
|
|
if (timeoutRef.current) {
|
|
clearTimeout(timeoutRef.current);
|
|
}
|
|
if (animationFrameRef.current) {
|
|
cancelAnimationFrame(animationFrameRef.current);
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
return {
|
|
debounce,
|
|
throttle,
|
|
smoothAnimation,
|
|
};
|
|
};
|