Какой предпочитаешь способ управления компонентами?

Мой подход к управлению компонентами в современном фронтенде

Как senior frontend разработчик с более чем 10-летним опытом, я предпочитаю комбинированный подход, адаптирующийся под конкретные требования проекта, его масштаб и команду разработчиков. Не существует универсального "лучшего" способа — есть наиболее подходящий для конкретного контекста.

Основные критерии выбора архитектуры

При выборе подхода к управлению компонентами я оцениваю следующие факторы:

• Масштаб приложения (SPA, MPA, микросервисная архитектура)
• Сложность стейт-менеджмента (локальное vs глобальное состояние)
• Требования к переиспользованию (компонентный дизайн-система vs одноразовые компоненты)
• Командные соглашения и стандарты (консистентность кодовой базы)
• Производительность и оптимизация (мемоизация, ленивая загрузка)

Предпочтительные паттерны в React-экосистеме

1. Container/Presentational Pattern (классический подход)

// Container component (логика)
const UserListContainer = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    fetchUsers().then(data => {
      setUsers(data);
      setLoading(false);
    });
  }, []);
  
  return <UserListPresentation users={users} loading={loading} />;
};

// Presentational component (отображение)
const UserListPresentation = ({ users, loading }) => {
  if (loading) return <Spinner />;
  
  return (
    <ul>
      {users.map(user => (
        <UserItem key={user.id} user={user} />
      ))}
    </ul>
  );
};

Этот подход обеспечивает чистое разделение ответственности, что упрощает тестирование и поддержку. Однако в современных React-приложениях я часто комбинирую его с хуками.

2. Custom Hooks Pattern (современная практика)

// Кастомный хук для бизнес-логики
const useUsers = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  
  const fetchUsers = useCallback(async () => {
    setLoading(true);
    const data = await api.getUsers();
    setUsers(data);
    setLoading(false);
  }, []);
  
  useEffect(() => {
    fetchUsers();
  }, [fetchUsers]);
  
  return { users, loading, refetch: fetchUsers };
};

// Компонент, использующий кастомный хук
const UserList = () => {
  const { users, loading } = useUsers();
  
  if (loading) return <Spinner />;
  
  return (
    <ul>
      {users.map(user => (
        <UserItem key={user.id} user={user} />
      ))}
    </ul>
  );
};

Кастомные хуки — мой предпочтительный подход для большинства проектов, поскольку они обеспечивают:

• Лучшую инкапсуляцию логики
• Легкое переиспользование
• Упрощенное тестирование
• Совместимость с React DevTools

3. Compound Components Pattern для сложных UI

const Accordion = ({ children }) => {
  const [openIndex, setOpenIndex] = useState(null);
  
  return (
    <AccordionContext.Provider value={{ openIndex, setOpenIndex }}>
      <div className="accordion">{children}</div>
    </AccordionContext.Provider>
  );
};

Accordion.Item = ({ children, index }) => {
  const { openIndex, setOpenIndex } = useContext(AccordionContext);
  const isOpen = openIndex === index;
  
  return (
    <div className={`accordion-item ${isOpen ? 'open' : ''}`}>
      {children(isOpen, () => setOpenIndex(isOpen ? null : index))}
    </div>
  );
};

// Использование
<Accordion>
  <Accordion.Item index={0}>
    {(isOpen, toggle) => (
      <>
        <h3 onClick={toggle}>Заголовок 1</h3>
        {isOpen && <p>Контент 1</p>}
      </>
    )}
  </Accordion.Item>
</Accordion>

Интеграция с стейт-менеджментом

Для глобального состояния предпочитаю комбинированный подход:

// Контекст для темы/настроек
const ThemeContext = createContext();

// Redux/Toolkit для сложного бизнес-состояния
const userSlice = createSlice({
  name: 'user',
  initialState: { data: null, permissions: [] },
  reducers: {
    setUser: (state, action) => {
      state.data = action.payload;
    }
  }
});

// React Query/SWR для server-state
const { data: posts } = useQuery({
  queryKey: ['posts'],
  queryFn: fetchPosts,
  staleTime: 30000
});

Ключевые принципы моего подхода

1. Принцип единственной ответственности — каждый компонент решает одну задачу
2. Инверсия зависимостей — компоненты зависят от абстракций, а не реализаций
3. Composition over inheritance — композиция через children/props всегда предпочтительнее наследования
4. Оптимизация рендеринга — использование React.memo, useMemo, useCallback там, где это измеримо улучшает производительность
5. TypeScript для статической типизации и улучшения DX

Адаптация под проект

В реальных проектах я применяю гибридную стратегию:

• Atomic Design для дизайн-систем
• Feature-Sliced Design или Modular architecture для бизнес-логики
• Кастомные хуки для извлечения повторяющейся логики
• Контекст для сквозных функциональностей (тема, локализация)
• Сторонние решения (React Query, Formik) для стандартных задач

Такой гибкий подход позволяет создавать масштабируемые, поддерживаемые и производительные приложения, адаптируясь под меняющиеся требования бизнеса и технологии.