Как использовал Custom Hooks для оптимизации рендеринга

Custom Hooks помогают выносить повторяющуюся логику из компонентов, уменьшая дублирование кода и оптимизируя рендеринг. Например, хук для подписки на изменения размера окна: ```jsx function useWindowSize() { const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight }); useEffect(() => { const handleResize = () => setSize({ width: window.innerWidth, height: window.innerHeight }); window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); return size; } // Использование в компоненте function MyComponent() { const { width } = useWindowSize(); return ; } ``` Преимущества: - Логика изолирована в хуке - Компонент становится чище - Можно мемоизировать значения с useMemo внутри хука - Легко переиспользовать между компонентами