-
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.
