O useEffect é um tipo de hook
muito versátil.

Uma de suas funções
é o efeito colateral.

Vamos ver como funciona?

No projeto temos
a seguinte estrutura,

na pasta "components",
"Exemplo2".

Nosso componente "Exemplo2"
com a primeira letra maiúscula,

".jsx" a sua extensão.

Temos a seguinte estrutura,

estamos importando um hook
chamado "useRef"

que, na verdade, 
ele ajuda o useEffect

a memorizar o que ele vai fazer
como colateral.

Nesse exemplo,
nós temos aqui uma função,

que está recebendo uma constante
"selecionarRef".

Então aqui, é uma variável selecionar 
e estou passando "useRef" vazio.

Embaixo, eu estou criando
o meu "useEffect",

que é o efeito colateral.

É uma função que estou
recebendo uma variável "seleElemento"

e aqui, esse "seleElemento",
está recebendo

o que o meu "useRef" guardou.

Então é como se esse "useRef"
pegasse o valor,

guardasse e depois passasse
para o "useEffect" novamente.

"Current" é o atual.

Então, é o que você estiver
selecionando atualmente.

E eu vou já mostrar aqui na tela.

E aqui, é uma condicional

dizendo que ao escolher
uma das opções,

ele deixa marcado, 
selecionado.

E no nosso "return",
exatamente como está aqui na tela,

um "select" com três opções,
HTML, CSS e JavaScript.

Vamos ver então o useEffect
e o useRef agindo.

Por exemplo, está HTML,
ao escolher CSS,

ficou o CSS,
está selecionado o CSS.

Ao escolher o JavaScript,
ficou o JavaScript.

HTML, HTML.

É isso que o useEffect faz
como colateral

com a ajuda do useRef que guarda
na memória o valor selecionado.

E assim temos o uso do useEffect
como efeito colateral

ao selecionar uma opção
com a ajuda de um outro hook

que é o useRef,

que vai memorizar
o que foi selecionado.