Eu garanto que você nunca viu REACT HOOKS dessa forma! Até mesmo uma criança consegue entender!
Antes de ler eu gostaria de pedir que fossem lá no linkedin dar um apoio e deixar um comentário no meu pequeno artigo. Fiz de coração e estou comaçando a postar novos artigos sobre meus estudos. Espero que possa te ajudar e também conto com a sua ajuda!
Link da publicação: https://www.linkedin.com/posts/joaokremer_react-hooks-js-activity-7039977762362658816-Gja8?utm_source=share&utm_medium=member_desktop
Eu garanto que você nunca viu HOOKS dessa forma
Nesse meu resumo de hoje eu quero te fazer entender o que são os hooks através de uma explicação que facilita até mesmo o entendimento de uma criança. Sim, essa é a forma que eu procuro aplicar as explicações para mim mesmo. E espero que essa abordagem possa te ajudar a entender melhor sobre esse tópico tão importante no React.
Imagine que você está brincando com seus amigos e jogando um jogo de memória. No início do jogo, todas as cartas estão viradas para baixo e você precisa encontrar os pares correspondentes de cartas. Quando você virar duas cartas, você pode ver o que tem nelas e, se elas combinarem, você ganha um ponto. O jogo continua até que todas as cartas tenham sido encontradas.
Agora, imagine que o jogo de memória é como uma aplicação React e as cartas são como os componentes de uma aplicação. Um componente é como uma peça de informação ou funcionalidade que pode ser usada em diferentes partes da aplicação. Por exemplo, um botão pode ser um componente, assim como um formulário ou uma lista de itens.
useState
Os hooks são como ferramentas especiais que você pode usar para tornar seus componentes mais poderosos. Por exemplo, o hook useState
é como uma tabela que você pode usar para lembrar quantos pontos cada jogador marcou durante o jogo. Cada vez que um jogador encontra um par de cartas correspondente, você atualiza a tabela de pontos com o novo valor.
useEffect
O hook useEffect
é como um temporizador que você pode usar para executar ações especiais quando algo acontece no jogo. Por exemplo, você pode usar o useEffect para exibir uma mensagem de parabéns quando um jogador marca muitos pontos em sequência.
useContext
O hook useContext
é como um telefone que você pode usar para falar com outras pessoas durante o jogo. Por exemplo, você pode usar o useContext
para compartilhar informações entre diferentes componentes do jogo, como o número total de cartas ou o número de jogadores.
useReducer
O hook useReducer
é como um juiz que você pode usar para gerenciar o jogo de memória. Em vez de apenas contar os pontos, você pode usar o useReducer
para criar regras mais complexas para o jogo. Por exemplo, você pode usar o useReducer
para impedir que um jogador ganhe pontos se ele virar uma carta errada.
useMemo
O hook useMemo
é como um assistente que você pode usar para fazer cálculos complicados. Por exemplo, se você estiver usando uma lista de cartas para o jogo, você pode usar o useMemo
para garantir que a lista seja atualizada apenas quando necessário. Isso pode ajudar a tornar o jogo mais rápido e eficiente.
Hooks personalizados
Quer saber mais sobre os diferentes tipos de hooks e também saber sobre os "hooks personalizados"? Deixa aí nos comentários o que achou da explicação e o que deseja saber.
Infelizmente aqui no linkedin não podemos postar um artigo muito grande. Mas fico feliz em poder compartilhar um pouco dos meus estudos com vocês.