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