Как переиспользовать UI-компонент при разных источниках данных?

Переиспользование UI-компонента с разными источниками данных — это фундаментальный принцип компонентного подхода, который повышает гибкость и тестируемость кода. Основная идея заключается в разделении ответственности: компонент отвечает только за отображение (presentation), а загрузка и подготовка данных (business logic) делегируется наружу.

Ключевые подходы

• Props и Composition: Самый простой способ — передавать данные в компонент через props. Компонент ничего не знает о том, откуда пришли данные.
• Render Props: Паттерн, при котором компонент принимает функцию (render prop), которая возвращает React-элемент. Эта функция получает данные как аргумент, что позволяет компоненту-контейнеру управлять логикой данных.
• Кастомные хуки (Custom Hooks): Идеально подходят для инкапсуляции логики получения данных (fetching, состояние загрузки, ошибки). UI-компонент использует хук, чтобы получить данные, и затем рендерит их.
• Компоненты-провайдеры (Context): Полезны, когда данные нужны многим компонентам на разных уровнях вложенности, но сам UI-компонент по-прежнему должен оставаться независимым от конкретного контекста.

Практический пример

Рассмотрим компонент UserList, который должен отображать список пользователей из API, из локального состояния (Redux) или из статичного массива.

// 1. Чистый презентационный компонент, принимающий данные через props
function UserList({ users, isLoading, error }) {
  if (isLoading) return Loading...;
  if (error) return Error: {error.message};
  return (
    
      {users.map(user => (
        {user.name}
      ))}
    
  );
}

// 2. Кастомный хук для загрузки данных с API
function useUsersFromAPI() {
  const [users, setUsers] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    setIsLoading(true);
    fetch('/api/users')
      .then(res => res.json())
      .then(setUsers)
      .catch(setError)
      .finally(() => setIsLoading(false));
  }, []);

  return { users, isLoading, error };
}

// 3. Родительский компонент, который соединяет хук и UI
function App() {
  const apiData = useUsersFromAPI();
  const staticData = { users: [{id: 1, name: 'Alice'}], isLoading: false, error: null };

  return (
    
      Users from API:
      
      Static Users:
      
    
  );
}

В этом примере UserList полностью переиспользуем. Мы можем легко создать другой хук useUsersFromRedux или передать моковые данные напрямую, не меняя сам компонент списка.

Вывод: Такой подход стоит применять всегда при создании компонентов, которые отображают данные. Он делает код предсказуемым, облегчает тестирование (можно тестировать компонент с фиктивными данными) и позволяет быстро адаптировать интерфейс к изменениям в бизнес-логике или источниках данных.