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.