Minha solução - Criando componente separado | React: desenvolvendo em React Router com JavaScript

Não sei se faz sentido, mas para mim, como dividimos todos os componentes da tela em componentes separados, entendi que faria mais sentido fazer a parte dos Posts Recomendados como um componente separado e apenas importá-lo no final do Post. Pensei também que assim, futuramente, conseguiríamos incorporar esse componente em outra parte do projeto.

Criei o componente com a seguinte lógica:

import styles from "./Recomendacoes.module.css";
import PostCard from "componentes/PostCard";
import posts from "json/posts.json";
import { useParams } from "react-router-dom";

export default function Recomendacoes() {
  const parametros = useParams();

  const listaFiltrada = posts
    .filter((post) => post.id !== Number(parametros.id))
    .sort(() => Math.random() - 0.5)
    .slice(0, 4);

  return (
    <section>
      <h2 className={styles.titulo}>Outros posts que você pode gostar:</h2>
      <ul className={styles.listaContainer}>
        {listaFiltrada.map((postFiltrado) => (
          <li key={postFiltrado.id}>
            <PostCard post={postFiltrado} />
          </li>
        ))}
      </ul>
    </section>
  );
}

E então importei no componente Post:

export default function Post() {
... código omitido...

  return (
    <Routes>
      <Route path="*" element={<PaginaPadrao />}>
        <Route
          index
          element={
            <PostModelo
              fotoCapa={`/assets/posts/${post.id}/capa.png`}
              titulo={post.titulo}
            >
              <div className="post-markdown-container">
                <ReactMarkdown>{post.texto}</ReactMarkdown>
              </div>
              <div>
                <Recomendacoes/> //IMPORTEI O COMPONENTE
              </div>
            </PostModelo>
          }
        />
      </Route>
    </Routes>
  );
}

Gostaria de saber a opinião de vocês se vale ou não a pena, mesmo com um pouco de repetição de código no novo componente, fazer o componente separado.

Olá, Dara!

Achei muito interessante a sua abordagem de criar um componente separado para os Posts Recomendados. Essa é uma ótima prática de organização do código e também permite reutilizar esse componente em outras partes do projeto, como você mencionou.

No seu código, você está filtrando os posts para excluir o post atual e, em seguida, selecionando aleatoriamente 4 posts para exibir como recomendações. Acredito que essa lógica está correta e atende ao requisito de mostrar 4 cards de posts, reutilizando o componente PostCard.

Sobre a repetição de código no novo componente, acredito que não seja um problema significativo. Afinal, você está apenas importando o componente PostCard e utilizando-o para renderizar os cards dos posts recomendados. Essa repetição é necessária para garantir a modularidade e a reutilização do código.

Portanto, acredito que vale a pena criar o componente separado para os posts recomendados, como você fez. Essa abordagem torna o código mais organizado, facilita a manutenção e permite reutilizar o componente em outras partes do projeto.

Espero ter ajudado e bons estudos!