React

Сегодня хочу показать вам один из практичных паттернов в React - Container & Presentational Components.

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

⚡️ Подход простой:

- Container-компоненты отвечают за работу с данными: запросы к API, обработку состояния, вызовы хендлеров.
- Presentational-компоненты - только за отображение. Они получают данные и колбэки через props и не думают о том, откуда эти данные пришли.

Пример 👇

// Container
function UserContainer() {
  const [user, setUser] = React.useState(null);

  React.useEffect(() => {
    fetch("/api/user")
      .then(res => res.json())
      .then(setUser);
  }, []);

  return <UserProfile user={user} />;
}

// Presentational
function UserProfile({ user }) {
  if (!user) return <p>Загрузка...</p>;
  return <h2>{user.name}</h2>;
}

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

А как вы пишете? Делите логику и UI или чаще держите все в одном компоненте?

✍️ @React_lib

👍3

www.tgoop.com/React_lib/709

1.21K viewsAug 18 at 12:20

Сегодня хочу показать вам один из практичных паттернов в React - Container & Presentational Components.

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

⚡️ Подход простой:

- Container-компоненты отвечают за работу с данными: запросы к API, обработку состояния, вызовы хендлеров.
- Presentational-компоненты - только за отображение. Они получают данные и колбэки через props и не думают о том, откуда эти данные пришли.

Пример 👇

// Container
function UserContainer() {
  const [user, setUser] = React.useState(null);

  React.useEffect(() => {
    fetch("/api/user")
      .then(res => res.json())
      .then(setUser);
  }, []);

  return <UserProfile user={user} />;
}

// Presentational
function UserProfile({ user }) {
  if (!user) return <p>Загрузка...</p>;
  return <h2>{user.name}</h2>;
}

BY React