O Princípio de Responsabilidade Única (SRP) no React é como uma regra importante para nos ajudar a fazer nossos trabalhos de programação melhor. É como se cada coisa tivesse o seu lugar certo.
Imagine que você tem um monte de brinquedos para organizar. O SRP nos diz que cada brinquedo deve ter uma função específica. Por exemplo, um carrinho só serve para andar, uma boneca só serve para brincar e um quebra-cabeça só serve para montar. Não faz sentido misturar as funções deles.
Quando seguimos o SRP, fica mais fácil cuidar dos nossos brinquedos. Cada um faz o que sabe fazer de melhor, sem confusão. Se misturássemos as funções, poderia ficar bagunçado e complicado. Por exemplo, se o carrinho tentasse montar o quebra-cabeça, isso seria estranho, certo?
O SRP ajuda a deixar nosso trabalho organizado e fácil de entender. Assim, podemos ser melhores programadores e evitar erros. Se cada coisa faz o que deve, conseguimos programar de forma mais eficaz e não teremos problemas no futuro. É como ter nossos brinquedos bem cuidados e prontos para a diversão!
Veja o exemplo abaixo:
Imagine que você está brincando com peças de LEGO. Agora, temos uma regra importante: cada pessoa tem um papel específico. Uma pessoa constrói coisas com as peças e a outra pessoa as organiza. Mas, o que aconteceria se a mesma pessoa tentasse fazer os dois ao mesmo tempo? Isso seria meio confuso, não é?
É mais ou menos o que está acontecendo com o nosso componente. Ele está tentando fazer duas coisas ao mesmo tempo. O componente está tentando encontrar os brinquedos na caixa (a API) e, ao mesmo tempo, montá-los na sua cidade de LEGO (a tela).
A melhor maneira de resolver isso é ter uma pessoa que encontra os brinquedos na caixa (a lógica de busca) e outra pessoa que os monta na cidade de LEGO (a lógica de renderização). Assim, cada uma faz o seu trabalho direitinho, sem confusão.
Então, para deixar tudo mais organizado e funcionando bem, dividimos as tarefas. Isso é como ter pessoas diferentes cuidando de diferentes partes do jogo, e assim tudo fica mais fácil e divertido!
Então vamos resolver, simplesmente separando a lógica de buscar os produtos em um custom hook:
Agora temos nosso componente mais limpo e um custom hook, cada um com sua responsabilidade.
😀
0 Comentários