React fornece alguns Hooks internos como o useState e o useEffect. Mas voc\u00ea tamb\u00e9m pode criar os seus pr\u00f3prios Hooks para reutilizar o comportamento de state entre componentes diferentes.<\/span><\/p>\n Existem basicamente duas regras que devemos seguir ao utilizar os conceitos de hooks:<\/span><\/p>\n Seguindo essas regras, voc\u00ea garante que toda l\u00f3gica de estado (<\/span>state<\/span>) no componente seja claramente vis\u00edvel no c\u00f3digo fonte, os criadores do React criaram um plugin eslint chamado eslint-plugin-react-hooks para uma melhor aplica\u00e7\u00e3o desta regra, esse plugin j\u00e1 \u00e9 instalado quando usamos o create-react-app para criar um projeto React, est\u00e1 n\u00e3o \u00e9 a \u00fanica forma de criar projetos React, mas uma das mais usadas.<\/span><\/p>\n O exemplo acima \u00e9 de um componente exemplo, que est\u00e1 usando o hook useState. N\u00f3s o chamamos dentro de um componente funcional para adicionar alguns states locais a ele. React ir\u00e1 preservar este state entre re-renderiza\u00e7\u00f5es, o useState retorna um array com duas posi\u00e7\u00f5es: a primeira posi\u00e7\u00e3o cont\u00e9m o valor do state e a segunda uma fun\u00e7\u00e3o que permite atualiz\u00e1-lo. Voc\u00ea pode chamar essa fun\u00e7\u00e3o a partir de um manipulador de eventos ou de qualquer outro lugar. Note que o valor de count \u00e9 atualizado usando a fun\u00e7\u00e3o setCount a cada vez que o evento de click no bot\u00e3o \u00e9 usado.<\/span><\/p>\n O hook useState pode ou n\u00e3o receber um par\u00e2metro, este valor recebido por par\u00e2metro que pode adotar qualquer tipo, ser\u00e1 o estado(state) inicial do hook, no exemplo acima este valor \u00e9 zero, j\u00e1 que o contador neste caso deve come\u00e7ar em zero. Outro ponto a se ressaltar \u00e9 que voc\u00ea pode usar este hooks quantas vezes quiser dentro de um componente.<\/span><\/p>\n O hook useEffect adiciona a funcionalidade de executar efeitos colaterais atrav\u00e9s de um componente funcional, ou seja, quando o React renderizar nosso componente, ele ir\u00e1 se lembrar do useEffect que usamos, e ent\u00e3o executar os nossos efeitos depois de atualizar o DOM. Isso acontece para cada renderiza\u00e7\u00e3o, incluindo a primeira. Neste caso, quando o React renderizar nosso componente pela primeira vez, o t\u00edtulo da p\u00e1gina ser\u00e1 atualizado.<\/span><\/p>\n O hook useEffect ainda pode receber outro par\u00e2metro, que \u00e9 opcional, este par\u00e2metro nada mais \u00e9 que um array de depend\u00eancias, quando estas depend\u00eancias sofrerem altera\u00e7\u00f5es, a fun\u00e7\u00e3o que o useEffect recebe como primeiro par\u00e2metro \u00e9 acionada. Neste caso, a cada modifica\u00e7\u00e3o na vari\u00e1vel count, o t\u00edtulo da p\u00e1gina ser\u00e1 alterado usando o novo valor de count.<\/span><\/p>\n \u00c0s vezes, queremos reutilizar algumas l\u00f3gicas de state entre componentes. Tradicionalmente, haviam duas solu\u00e7\u00f5es populares para este problema: <\/span>componentes de ordem superior<\/span><\/a> e <\/span>renderiza\u00e7\u00e3o de props<\/span><\/a>. Hooks Customizados te permitem fazer isso, mas sem adicionar mais componentes para a sua \u00e1rvore.<\/span><\/p>\n Abaixo temos um componente chamado useFriendStatus, que chama os Hooks useState e useEffect para subscrever-se ao status de online de um amigo.<\/span><\/p>\n Este componente recebe friendID como argumento e nos retorna se este amigo est\u00e1 online, deste modo \u00e9 poss\u00edvel utilizar ele em outros componentes.<\/span><\/p>\n Agora imaginemos que precisamos reutilizar essa l\u00f3gica de subscri\u00e7\u00e3o em outro componente, como por exemplo:<\/span><\/p>\n O estado (state) de cada componente \u00e9 completamente independente. Hooks s\u00e3o a forma de reutilizar l\u00f3gica de state, n\u00e3o o state em si. De fato, cada chamada para um Hook tem um state completamente isolado, ent\u00e3o voc\u00ea pode at\u00e9 utilizar o mesmo Hook custom duas vezes em um componente.<\/span><\/p>\n Hooks customizados s\u00e3o mais uma conven\u00e7\u00e3o do que uma funcionalidade. Se o nome de uma fun\u00e7\u00e3o come\u00e7a com \u201duse\u201d e chama outros Hooks, consideramos que \u00e9 um Hook customizado. A conven\u00e7\u00e3o de um nome que come\u00e7a com \u201cuse\u201d \u00e9 \u00fatil, j\u00e1 que o linter do react comentado anteriormente procura bugs em nomes com este prefixo.<\/span><\/p>\n Voc\u00ea pode escrever Hooks customizados que abrangem uma ampla gama de casos de uso, como manipula\u00e7\u00e3o de formul\u00e1rios, anima\u00e7\u00f5es, subscri\u00e7\u00f5es declarativas, temporizadores e provavelmente muitos outros que n\u00e3o consideramos.<\/span> <\/b><\/p>\n <\/p>\n – Bruno Rossi<\/p>\n","protected":false},"excerpt":{"rendered":" O que s\u00e3o Hooks? Hooks s\u00e3o fun\u00e7\u00f5es que permitem a voc\u00ea \u201cligar-se\u201d aos recursos de state e ciclo de vida do React a partir de componentes funcionais, permitindo organizar melhor a l\u00f3gica que ser\u00e1 usada em um componente. Hooks n\u00e3o funcionam dentro de classes, eles permitem que voc\u00ea use React sem classes, que atualmente \u00e9 […]<\/p>\n","protected":false},"author":2948,"featured_media":3185,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[124,112],"tags":[149,192],"class_list":["post-3186","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-destaques","category-redacao","tag-redacao","tag-web-e-front-end"],"acf":[],"_links":{"self":[{"href":"http:\/\/www.55bet-pro.com\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts\/3186","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.55bet-pro.com\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.55bet-pro.com\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.55bet-pro.com\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/users\/2948"}],"replies":[{"embeddable":true,"href":"http:\/\/www.55bet-pro.com\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/comments?post=3186"}],"version-history":[{"count":0,"href":"http:\/\/www.55bet-pro.com\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts\/3186\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.55bet-pro.com\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/media\/3185"}],"wp:attachment":[{"href":"http:\/\/www.55bet-pro.com\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/media?parent=3186"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.55bet-pro.com\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/categories?post=3186"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.55bet-pro.com\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/tags?post=3186"}],"curies":[{"name":"wp","href":"http:\/\/api.w.org\/{rel}","templated":true}]}}Regra dos Hooks<\/b><\/h3>\n
\n
useState<\/b><\/h4>\n
![\"\"](\"http:\/\/www.55bet-pro.com\/app\/uploads\/sites\/791\/2021\/07\/useState.png\")
<\/p>\nuseEffect<\/b><\/h4>\n
![\"\"](\"http:\/\/www.55bet-pro.com\/app\/uploads\/sites\/791\/2021\/07\/useEffect.png\")
<\/p>\n![\"\"](\"http:\/\/www.55bet-pro.com\/app\/uploads\/sites\/791\/2021\/07\/useEffect-com-todos-os-parametros.png\")
<\/p>\nConstruindo seus hooks<\/b><\/h4>\n
![\"\"](\"http:\/\/www.55bet-pro.com\/app\/uploads\/sites\/791\/2021\/07\/hooks-personalizados.png\")
<\/p>\n![\"\"](\"http:\/\/www.55bet-pro.com\/app\/uploads\/sites\/791\/2021\/07\/hooks-personalizados-2.png\")
<\/p>\n![\"\"](\"http:\/\/www.55bet-pro.com\/app\/uploads\/sites\/791\/2021\/07\/hooks-personalizados-3.png\")
<\/p>\n