-
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 to passando "useRef" vazio.
-
Embaixo, eu estou criando
o meu e "useEffect",
-
que é o efeito colateral.
-
É uma função que eu 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
-
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 essa 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 CSS.
-
Ao escolher o JavaScript
ficou o JavaScript.
-
HTML,
HTML.
-
É isso que 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 ajuda de um outro look
-
que é o useRef que vai memorizar
o que foi selecionado.
