Minha solução - Criando componente separado

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.