{"id":3186,"date":"2021-07-26T13:31:59","date_gmt":"2021-07-26T16:31:59","guid":{"rendered":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/?p=3186"},"modified":"2025-09-02T14:21:31","modified_gmt":"2025-09-02T17:21:31","slug":"react-hooks","status":"publish","type":"post","link":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/2021\/07\/26\/react-hooks","title":{"rendered":"React Hooks"},"content":{"rendered":"\n

O que s\u00e3o Hooks?<\/b><\/h2>\n

H<\/span>ooks 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 o mais recomendado, embora o uso de classes ainda seja suportado e mantido em alguns projetos \u201cantigos\u201d. <\/span><\/p>\n

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

Regra dos Hooks<\/b><\/h3>\n

Existem basicamente duas regras que devemos seguir ao utilizar os conceitos de hooks:<\/span><\/p>\n

    \n
  1. Use hooks apenas no n\u00edvel superior: N\u00e3o use hooks dentro de loops, regras condicionais ou fun\u00e7\u00f5es aninhadas (fun\u00e7\u00f5es dentro de fun\u00e7\u00f5es). Em vez disso, sempre use hooks no n\u00edvel superior de sua fun\u00e7\u00e3o React, antes de qualquer retorno antecipado. Seguindo essas regras, voc\u00ea garante que os hooks ser\u00e3o chamados na mesma ordem a cada vez que o componente renderizar. \u00c9 isso que permite que o React preserve corretamente o estado dos hooks quando s\u00e3o usados v\u00e1rias chamadas a <\/span>useState<\/span> e <\/span>useEffect<\/span> na mesma fun\u00e7\u00e3o.<\/span><\/li>\n
  2. Use hooks apenas dentro de fun\u00e7\u00f5es do React: N\u00e3o use hooks dentro de fun\u00e7\u00f5es javascript normais, ao inv\u00e9s disso voc\u00ea pode <\/span>chamar hooks em componentes React ou chamar hooks dentro de hooks customizados (Explicarei isso em breve).<\/span><\/li>\n<\/ol>\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

    useState<\/b><\/h4>\n

    \"\"<\/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

    useEffect<\/b><\/h4>\n

    \"\"<\/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

    \"\"<\/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

    Construindo seus hooks<\/b><\/h4>\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

    \"\"<\/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

    \"\"<\/p>\n

    \"\"<\/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":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts\/3186","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/users\/2948"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/comments?post=3186"}],"version-history":[{"count":0,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/posts\/3186\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/media\/3185"}],"wp:attachment":[{"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/media?parent=3186"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/categories?post=3186"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/wp-json\/wp\/v2\/tags?post=3186"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}