Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Desestruturação

Referente ao curso React: arquitetando soluções de roteamento e gestão de estado com React Router e Context API, no capítulo Rotas aninhadas e atividade Conceitos importantes!

por Cristian da Rosa Melo
| 53.3k xp | 43 posts
Front end Developer

Sobre a afirmação: "Exatamente! O destructuring de props é uma técnica que nos permite extrair valores específicos de um objeto (no caso, as props passadas para o componente) de forma mais simples e legível. Isso torna o nosso código mais limpo e fácil de entender, além de facilitar o trabalho com as props no componente. É uma técnica bastante utilizada em componentes React e é uma boa prática a ser seguida"

// código no stackblitz https://stackblitz.com/edit/react-ts-ejvnqy?file=App.tsx

// --> DESESTRUTURAÇÃO JS

const Titulo = ({ titulo, subtitulo }) => {
  return (
    <div>
      <h1>{titulo}</h1>
      <h2>{subtitulo}</h2>
    </div>
  );
};

export default Titulo;

// --> PORÉM ME AGRADA MUITO MAIS AOS ESSE FORMATO EM TS

interface ITitulo {
    titulo: string,
    subtitulo: string
}

const Titulo = (props: ITitulo) => {
  return (
    <div>
      <h1>{props.titulo}</h1>
      <h2>{props.subtitulo}</h2>
    </div>
  );
};

export default Titulo;

// --> COMPONENT

export const App = () => {
return (
    <Titulo titulo={"Cafe Hoje"} subtitulo={"R$2,00"} />
    )
}

O que voces acham? Desestruturação faz sentido em ts ?

2 respostas
solução!
por Vinicios Neves
| 1001.4k xp | 1104 posts
Instrutor Tech Lead | Tech Educator

Salve, Cristian!

O uso de desestruturação deixa o código mais limpo e legível. Eu evito apenas se, por algum motivo, o componente recebe muitas props. Mas eu também evito componentes que recebem muitas props, então acabo usando desestruturação quase sempre :)

Já a segunda abordagem deixa o código mais explícito e pode ser mais fácil de entender.

O React, enquanto biblioteca, não tem uma indicação oficial sobre qual das duas abordagens é a melhor.

No final, é mais uma questão de estilo de código. O único ajuste que eu faria na versão que faz a desestruturação seria tipar as props do mesmo jeito, assim:

const Titulo = ({ titulo, subtitulo }: ITitulo) => {
  return (
    <div>
      <h1>{titulo}</h1>
      <h2>{subtitulo}</h2>
    </div>
  );
};

export default Titulo;

Como o código compilado, no fim, vai acabar por ser muito parecido... a questão aqui é mesmo estilo de código. A minha única sugestão é que, uma vez adotado um estilo num projeto, é aplicá-lo em todos os componentes :)

Bons estudos e foi uma excelente pergunta.

por Cristian da Rosa Melo
| 53.3k xp | 43 posts
Front end Developer

Bah, valeu professor !