Стоит ли выносить код в отдельный компонент?

Question

[Narts]

Есть контейнер, в котором выводятся посты:

<div className="posts">
            {posts.map((item) => (
              <div key={item.key} className="post" onClick={() => onOpen(item.key)}>
                <div className="post__text">
                  {item.text}
                </div>
                <div className="post__image">
                  {item.image}
                </div>
              </div>
            ))}
          </div>

Стоит ли код поста выносить в отдельный компонент:
{posts.map((item) => (<Post {...item} />))}

С одной стороны этот код используется только в этом контейнере, а с другой стороны код контейнера выглядит грязно, нечитабельно

Answer 1

[Aetae]

Всегда.
Больше пяти строчек в разметке - отдельный компонент.
Больше пяти строчек в коде - отдельный хук.)

Answer 2

[Ice]

Вы можете на этой же странице (если используется только тут) вынести post в отдельный компонент (метод) и убрать с onClick стрелку.

Comments

[Narts]

вы имеете в виду вынести из контейнера в отдельный компонент, но в файле контейнера?

[Василий Банников]

Narts, типа того, я бы аналогично сделал - положил бы рядом ещё 1 компонент, но не экспортировал его.

Answer 3

[Dmitriy Yefimchuk]

Я бы скорее всего вынес, так как ту мало грязи (бизнес логики) я думаю что вынести его в отдельный компонент не будет плохо. Презинтационная компонента будет казаться чище, и читабильней