0:00:07.780,0:00:11.077
O useEffect é um tipo de hook[br]muito versátil.

0:00:11.077,0:00:13.747
Uma de suas funções[br]é o efeito colateral.

0:00:13.747,0:00:15.150
Vamos ver como funciona?

0:00:15.150,0:00:19.953
No projeto temos[br]a seguinte estrutura,

0:00:19.953,0:00:22.922
na pasta "components",[br]"Exemplo2".

0:00:22.922,0:00:26.159
Nosso componente "Exemplo2"[br]com a primeira letra maiúscula,

0:00:26.159,0:00:29.462
".jsx" a sua extensão.

0:00:29.462,0:00:31.798
Temos a seguinte estrutura,

0:00:31.798,0:00:34.988
estamos importando um hook[br]chamado "useRef"

0:00:34.988,0:00:37.627
que, na verdade, [br]ele ajuda o useEffect

0:00:37.627,0:00:42.942
a memorizar o que ele vai fazer[br]como colateral.

0:00:42.942,0:00:46.793
Nesse exemplo,[br]nós temos aqui uma função,

0:00:46.793,0:00:52.352
que está recebendo uma constante[br]"selecionarRef".

0:00:52.352,0:00:57.856
Então aqui, é uma variável selecionar [br]e estou passando "useRef" vazio.

0:00:57.856,0:01:00.796
Embaixo, eu estou criando[br]o meu "useEffect",

0:01:00.796,0:01:02.829
que é o efeito colateral.

0:01:02.829,0:01:13.057
É uma função que estou[br]recebendo uma variável "seleElemento"

0:01:13.057,0:01:16.441
e aqui, esse "seleElemento",[br]está recebendo

0:01:16.441,0:01:18.678
o que o meu "useRef" guardou.

0:01:18.678,0:01:22.549
Então é como se esse "useRef"[br]pegasse o valor,

0:01:22.549,0:01:26.553
guardasse e depois passasse[br]para o "useEffect" novamente.

0:01:26.553,0:01:27.886
"Current" é o atual.

0:01:27.886,0:01:30.996
Então, é o que você estiver[br]selecionando atualmente.

0:01:30.996,0:01:33.293
E eu vou já mostrar aqui na tela.

0:01:33.293,0:01:36.361
E aqui, é uma condicional

0:01:36.361,0:01:39.251
dizendo que ao escolher[br]uma das opções,

0:01:39.251,0:01:42.984
ele deixa marcado, [br]selecionado.

0:01:42.984,0:01:47.841
E no nosso "return",[br]exatamente como está aqui na tela,

0:01:47.841,0:01:53.850
um "select" com três opções,[br]HTML, CSS e JavaScript.

0:01:53.850,0:01:59.020
Vamos ver então o useEffect[br]e o useRef agindo.

0:01:59.020,0:02:02.786
Por exemplo, está HTML,[br]ao escolher CSS,

0:02:02.786,0:02:05.992
ficou o CSS,[br]está selecionado o CSS.

0:02:05.992,0:02:09.829
Ao escolher o JavaScript,[br]ficou o JavaScript.

0:02:09.829,0:02:11.799
HTML, HTML.

0:02:11.799,0:02:16.525
É isso que o useEffect faz[br]como colateral

0:02:16.525,0:02:22.409
com a ajuda do useRef que guarda[br]na memória o valor selecionado.

0:02:22.409,0:02:26.346
E assim temos o uso do useEffect[br]como efeito colateral

0:02:26.346,0:02:31.050
ao selecionar uma opção[br]com a ajuda de um outro hook

0:02:31.050,0:02:32.339
que é o useRef,

0:02:32.339,0:02:34.829
que vai memorizar[br]o que foi selecionado.