WEBVTT

00:00:07.780 --> 00:00:11.077
O useEffect é um tipo de hook
muito versátil.

00:00:11.077 --> 00:00:13.747
Uma de suas funções
é o efeito colateral.

00:00:13.747 --> 00:00:15.150
Vamos ver como funciona?

00:00:15.150 --> 00:00:19.953
No projeto temos
a seguinte estrutura,

00:00:19.953 --> 00:00:22.922
na pasta "components",
"Exemplo2".

00:00:22.922 --> 00:00:26.159
Nosso componente "Exemplo2"
com a primeira letra maiúscula,

00:00:26.159 --> 00:00:29.462
".jsx" a sua extensão.

00:00:29.462 --> 00:00:31.798
Temos a seguinte estrutura,

00:00:31.798 --> 00:00:34.988
estamos importando um hook
chamado "useRef"

00:00:34.988 --> 00:00:37.627
que, na verdade, 
ele ajuda o useEffect

00:00:37.627 --> 00:00:42.942
a memorizar o que ele vai fazer
como colateral.

00:00:42.942 --> 00:00:46.793
Nesse exemplo,
nós temos aqui uma função,

00:00:46.793 --> 00:00:52.352
que está recebendo uma constante
"selecionarRef".

00:00:52.352 --> 00:00:57.856
Então aqui, é uma variável selecionar 
e estou passando "useRef" vazio.

00:00:57.856 --> 00:01:00.796
Embaixo, eu estou criando
o meu "useEffect",

00:01:00.796 --> 00:01:02.829
que é o efeito colateral.

00:01:02.829 --> 00:01:13.057
É uma função que estou
recebendo uma variável "seleElemento"

00:01:13.057 --> 00:01:16.441
e aqui, esse "seleElemento",
está recebendo

00:01:16.441 --> 00:01:18.678
o que o meu "useRef" guardou.

00:01:18.678 --> 00:01:22.549
Então é como se esse "useRef"
pegasse o valor,

00:01:22.549 --> 00:01:26.553
guardasse e depois passasse
para o "useEffect" novamente.

00:01:26.553 --> 00:01:27.886
"Current" é o atual.

00:01:27.886 --> 00:01:30.996
Então, é o que você estiver
selecionando atualmente.

00:01:30.996 --> 00:01:33.293
E eu vou já mostrar aqui na tela.

00:01:33.293 --> 00:01:36.361
E aqui, é uma condicional

00:01:36.361 --> 00:01:39.251
dizendo que ao escolher
uma das opções,

00:01:39.251 --> 00:01:42.984
ele deixa marcado, 
selecionado.

00:01:42.984 --> 00:01:47.841
E no nosso "return",
exatamente como está aqui na tela,

00:01:47.841 --> 00:01:53.850
um "select" com três opções,
HTML, CSS e JavaScript.

00:01:53.850 --> 00:01:59.020
Vamos ver então o useEffect
e o useRef agindo.

00:01:59.020 --> 00:02:02.786
Por exemplo, está HTML,
ao escolher CSS,

00:02:02.786 --> 00:02:05.992
ficou o CSS,
está selecionado o CSS.

00:02:05.992 --> 00:02:09.829
Ao escolher o JavaScript,
ficou o JavaScript.

00:02:09.829 --> 00:02:11.799
HTML, HTML.

00:02:11.799 --> 00:02:16.525
É isso que o useEffect faz
como colateral

00:02:16.525 --> 00:02:22.409
com a ajuda do useRef que guarda
na memória o valor selecionado.

00:02:22.409 --> 00:02:26.346
E assim temos o uso do useEffect
como efeito colateral

00:02:26.346 --> 00:02:31.050
ao selecionar uma opção
com a ajuda de um outro hook

00:02:31.050 --> 00:02:32.339
que é o useRef,

00:02:32.339 --> 00:02:34.829
que vai memorizar
o que foi selecionado.