Как избежать дублирования компонентов?

Дублирование кода, особенно в компонентах React, — частая проблема, которая усложняет поддержку и увеличивает риск ошибок. Чтобы её избежать, нужно применять принципы повторного использования и композиции.

Основные стратегии

• Создание переиспользуемых компонентов: Выделите общие части UI (кнопки, поля ввода, карточки) в отдельные компоненты, которые можно настраивать через props.
• Композиция компонентов: Вместо наследования используйте композицию, передавая компоненты как children или через специальные props (например, render props).
• Высшие компоненты (HOC): Функции, которые принимают компонент и возвращают новый с добавленной логикой (например, аутентификацией или загрузкой данных).
• Пользовательские хуки: Позволяют выносить общую логику состояния и побочных эффектов из компонентов.

Пример с пользовательским хуком

Допустим, несколько компонентов используют счётчик. Вместо дублирования логики useState и обработчиков создадим хук useCounter:

import { useState } from 'react';

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  const reset = () => setCount(initialValue);
  return { count, increment, decrement, reset };
}

// Использование в компоненте
function MyComponent() {
  const { count, increment } = useCounter();
  return (
    
      Count: {count}
      Increment
    
  );
}

Пример с компонентом-обёрткой

Если несколько компонентов должны иметь общий стиль или поведение, создайте компонент-обёртку:

function Card({ children }) {
  return (
    
      {children}
    
  );
}

// Использование
function UserProfile() {
  return (
    
      User Name
      Some description
    
  );
}

Вывод: Избегайте дублирования, выделяя общую логику в хуки, а общий UI — в переиспользуемые компоненты. Это особенно полезно в больших проектах, где важно поддерживать согласованность и упрощать рефакторинг.