Заметки про React(@ru_react_notes). Практики композиции функций в React Композиция функций – мощный способ создания сложной функциональ

Практики композиции функций в React Композиция функций – мощный способ создания сложной функциональности путем объединения простых и переиспользуемых функций. В контексте React композиция функций позволяет создавать более сложные и переиспользуемые компоненты, что улучшает организацию и структуру кода в больших приложениях. Филиппо Ривольта в своем блоге поделился практиками композиции функций: - Используйте HoC для абстракции общей функциональности. Оборачивая в HoC мы можем добавить дополнительное поведение или пропсы, не изменяя оригинальный компонент. - Объединяйте несколько HoC, используя композицию: compose(withFoo, withBar, withBaz)(Component). - Один HoC делает только одну работу, используйте кастомные хуки для хранения состояния. - Используйте техники функционального программирования, например, каррирование. Пример реализации HoC, который абстрагирует логику получения данных о пользователе:

import { useEffect, useState } from 'react';

function useFetchUsers(url) {
  const [users, setUsers] = useState([]);
  useEffect(() => {
    async function fetchData() {
      const res = await fetch(url);
      const data = await res.json();
      setUsers(data.users);
    }
    fetchData();
  }, [url]);
  return users;
}

function withFetchUsers(Component) {
  return function WrappedComponent(props) {
    const users = useFetchUsers(props.url);
    return <Component {...props} users={users} />;
  }
}

medium.com/@rivolt…ba8d37b1