< Return to Video

WEB CAP16 2025 VA05 REACT HOOK USEEFFECT

  • 0:08 - 0:11
    O useEffect é um tipo de hook
    muito versátil.
  • 0:11 - 0:14
    Uma de suas funções
    é o efeito colateral.
  • 0:14 - 0:15
    Vamos ver como funciona?
  • 0:15 - 0:20
    No projeto temos
    a seguinte estrutura,
  • 0:20 - 0:23
    na pasta "components",
    "Exemplo2"
  • 0:23 - 0:26
    Nosso componente "Exemplo2"
    com a primeira letra maiúscula,
  • 0:26 - 0:29
    '.jsx" a sua extensão.
  • 0:29 - 0:32
    Temos a seguinte estrutura.
  • 0:32 - 0:35
    Estamos importando o hook
    chamado "useRef"
  • 0:35 - 0:38
    que na verdade ele ajuda
    o useEffect
  • 0:38 - 0:43
    a memorizar o que ele vai fazer
    como colateral.
  • 0:43 - 0:47
    Nesse exemplo,
    nós temos aqui uma função
  • 0:47 - 0:52
    que está recebendo uma constante
    "selecionarRef".
  • 0:52 - 0:58
    Então, aqui é uma variável
    selecionar e to passando "useRef" vazio.
  • 0:58 - 1:01
    Embaixo, eu estou criando
    o meu e "useEffect",
  • 1:01 - 1:03
    que é o efeito colateral.
  • 1:03 - 1:13
    É uma função que eu estou
    recebendo uma variável "seleElemento"
  • 1:13 - 1:16
    e aqui esse "seleElemento"
    está recebendo
  • 1:16 - 1:19
    o que o meu "useRef" guardou.
  • 1:19 - 1:23
    Então é como se esse "useRef"
    pegasse o valor,
  • 1:23 - 1:27
    guardasse e depois passasse
    para o "useEffect" novamente.
  • 1:27 - 1:28
    "Current" é o atual.
  • 1:28 - 1:31
    então, é o que você estiver
    selecionando atualmente
  • 1:31 - 1:33
    eu vou já mostrar aqui na tela.
  • 1:33 - 1:38
    E aqui é uma condicional
    dizendo que ao escolher
  • 1:38 - 1:41
    uma das opções,
    ele deixa marcado, selecionado
  • 1:43 - 1:45
    e no nosso retorno,
  • 1:45 - 1:48
    exatamente como essa aqui na tela,
  • 1:48 - 1:50
    um select
  • 1:50 - 1:53
    com três opções
    HTML, CSS e JavaScript.
  • 1:54 - 1:54
    Vamos ver?
  • 1:54 - 1:57
    Então use Effect e use REF
  • 1:58 - 2:00
    Agindo, por exemplo, está.
  • 2:00 - 2:06
    HTML ao escolher CSS ficou o CSS
    está selecionado CSS
  • 2:06 - 2:09
    ao escolher
    o JavaScript ficou o JavaScript.
  • 2:10 - 2:13
    HTML. HTML É isso que usa
  • 2:13 - 2:19
    Effect faz como colateral
    com a ajuda do uso RF
  • 2:19 - 2:22
    que guarda na memória
    o valor selecionado.
  • 2:23 - 2:26
    E assim temos o uso do e usa effect
    como efeito colateral.
  • 2:26 - 2:31
    Ao selecionar uma opção
    com ajuda de um outro look
  • 2:31 - 2:35
    que é o uso RF que vai memorizar
    o que foi selecionado.
Title:
WEB CAP16 2025 VA05 REACT HOOK USEEFFECT
Video Language:
Portuguese, Brazilian
Duration:
02:38

Portuguese, Brazilian subtitles

Incomplete

Revisions Compare revisions