Table Of Contents
Ps:
acabei notando que em todos os trechos de codigo aqui colocados, quando a arrow function é usada => ele esta exibindo os caracteres (=>);
Então, toda vez que verem (=>); presumam ser => até eu conseguir uma solução para isso.
Introdução
Recentemente, comecei a estudar React no curso do Estardando Devs e acabamos estudando esses dois hooks primordiais, useState e o useEffect, algumas coisas sobre ambos conceitos ficaram um tanto quanto confusas para mim, então, depois de muito apanhar e praticar fui pesquisar e procurar entender mais sobre ambos para complementar o meu conhecimento.
Resolvi escrever esse texto para fixar mais esse aprendizado e talvez até ajudar qualquer pessoa que venha a ter dúvida semelhantes a minha, durante esse meio tempo de aprendizado, o meu acesso ao Github Copilot foi liberado e eu achei interessante narrar como foi "aprender" algo com uma tecnologia de I.A me dando algum auxilio e como ela funciona.
Reforçando que, esse texto se limita as minhas opiniões e experiencias;
Não irei entrar nos conceitos de "O que é hook" ou explicações profundas sobre o React, nem acho que tenho conhecimento para tal ainda, usarei exemplos simples mas funcionais que me ajudaram a entender melhor os conceitos e no final do texto irei deixar links de artigos que eu li/estou lendo para ter uma compreensão mais detalhada sobre tudo o que está sendo escrito aqui.
Criticas e sugestões sobre o conteúdo o texto são sempre bem vindas, por favor, se achou algo errado/mal escrito ou coisa do tipo, me oriente que eu irei arrumar assim que possível!
useState
Pelas minhas pesquisas e por uma leve quantidade de dedução,o useState, é o primeiro hook que geralmente é mostrado quando React é ensinado ou falado, na documentação oficial do React o exemplo que nós é apresentado é em forma de contador, escrito em código ficaria mais ou menos assim:
import React, { useState } from 'react;
function Example() {
const [count, setCount] = useState(0)
return (
<p>You clicked {count} times</p>
<button> setCount(count + 1)}>
Click me
</button>
);
}
Antes de eu dar minha explicação sobre como consegui entender melhor o que o useState faz, vou postar a forma feito em Javascript puro pra mostrar exatamente o que o count é e o que o setCount são:
let count = 0;
const setCount = (value) => {
count = value
}
O useState tem dois valores, o primeiro é uma variável e o segundo é uma função,e o trabalho dessa função é basicamente atualizar a variável!
Exemplificando a variável agora que esse exemplo está claro:
const [count, setCount] = useState(0)
const - declaração de que a variável é uma const.
[count, setCount ] - desestruturação do array, onde count é a variável e setCount - é a função que atualiza o estado dessa variável.
useState(0) - passando o parâmetro inicial para a função e consequentemente para a variável, ou seja, count ira começar em (0)
Reforçando que:
useState é um array, mas seu retorno não está limitado a tal, no exemplo acima foi passado um nú mero, porem poderia ter sido passado uma string " " (vazia ou não), ou um objeto { } (vazio ou não)
Ainda sobre a ideia de ser um array, a desestruturação do mesmo é opcional e facilita muito a leitura, mas poderia ser usado dessa forma:
const arrayState = useState(0);
const count = arrayState[0];
const setCount = arrayState[1];
Um ultimo exemplo usando dois useStates para exemplificar:
function App () {
const [count, setCount] = useState (0)
const [theme, setTheme] = useState ("")
function decrementCount () {
setCount(prevCount => prevCount -1)
setTheme('green')
}
function incrementCount() {
setCount(prevCount => prevCount +1)
setTheme('blue')
}
return (
<>
<button> - </button>
<span>{count}</span>
<span>{theme}</span>
<button> + </button>
>
)
}
No código acima, temos dois useState, um para gerenciar a variável count inicialmente declarado como 0, e um para gerenciar a variável theme, inicialmente declarado como " " (uma string vazia), e temos dois botões no fim do código onde, cada um deles tem uma função diferente atribuída, ao se clicar no botão de - a variável count sera subtraída em 1 e a variável theme vai renderizar green na tela, ao clicar no botão de + a variável count sera somada em 1 e a variável theme ira renderizar blue!
useEffect
Confesso que esse eu demorei um pouco mais para entender, o conceito e o que fazia, mas com o exemplo que eu vi, e irei escrever aqui, ficou claro e bem mais compreensível.
Dada a minha própria limitação, não sera tão extenso quanto o useState foi, mas acredito que ficará claro!
Um jeito simples de se entender o useEffect de inicio é, pensar em um bloco de código que você deseja executar toda vez que algum componente for renderizado, isso ficou bem confuso de inicio mas o exemplo abaixo me fez entender melhor:
function App () {
const [resourceType, setResourceType] = useState ('')
console.log('render')
useEffect (() => {
console.log("resourceType changed")
}, [resourceType] )
return (
<>
<button> setResourceType('post')}>Post</button>
<button> setResourceType('users')}>Users</button>
<button> setResourceType('comments')}>Comments</button>
<h1>{resourceType}</h1>
>
)
}
De inicio, temos a utilização do useState novamente, como dito na parte de cima, ele é uma hook que ira controlar estados, resourceType é a variável e setResourceType a função que atualiza o valor dessa variável, e de inicio está sendo passado uma string vazia para ela ( ' ' ).
Logo abaixo dessa declaração, temos um console.log que ira renderizar a palavra render, e em seguida temos o uso do useEffect, o mesmo recebe uma função como parâmetro (que pelo o que eu vi, quase sempre será uma arrow function) e essa função irá rodar outro console.log com a frase resourceType changed, e no fim do useEffect, temos um array com um parâmetro, nesse caso o resourceType, a nossa variável lá do inicio.
Na ultima parte, temos a renderização, três botoes, cada botão executando a função setResourceType e em cada um deles um parâmetro diferente é passado, no primeiro botão, o parâmetro é o post, no segundo botão, o parâmetro é users, e no terceiro o parâmetro é comments.
A funcionalidade do useEffect no exemplo acima será a seguinte:
Quando esse componente for renderizado, ele ira exibir no console a palavra render devido aquele primeiro console.log, ao se clicar em qualquer um dos botões, o h1 da página irá renderizar de acordo com o botão (post ou users ou comments) e ira exibir resourceType changed que estava no segundo console.log dentro do useEffect.
Isso acontece pois, como parâmetro, no useEffect, nos passamos o resourceType dentro daquele array, com isso, o bloco de código dentro do useEffect só sera rodado se o resourceType for modificado!
Se não houvesse parametro no array, e o mesmo estivesse vazio [ ], o bloco do useEffect seria usado apenas uma vez, durante a primeira renderização!
Se clicar no botão do Post uma vez, quando qualquer um dos dois outros parâmetros (users ou comments) estiver renderizado na tela, as duas mensagens serão exibidas, pois ao clicar no botão você chamou a função setResourceType e assim modificou o resourceType fazendo com que o código do bloco useEffect seja executado, mas se após isso, você clicar novamente no mesmo botão, você tera apenas um dos consoles.log, o de render, fora do useEffect, pois o resourceType segue sem ser modificado, era um Post e você clicando no mesmo botão ele continua sendo um Post, segue inalterado.
Esse foi o exemplo mais simples que consegui achar e ver na pratica o useEffect e facilitou demais o entendimento do mesmo para mim, por isso achei interessante escrever ele para reforçar, só que, o useEffect não se limita a isso, há um conceito mais abrangente nele que envolve React class lifecycle methods e componentDidMount, componentDidUpdate, e componentWillUnmount (infelizmente não consegui achar o nome desses conceitos em português e não achei uma boa ideia fazer tradução ao pé da letra).
Não posso falar sobre esses conceitos pois, ainda estou estudando e entendendo tudo isso, talvez num texto futuro eu escreva sobre, irei deixar os links que eu estou acompanhando e se aprofundam mais nesses assuntos na ultima parte!
Github Copilot
Por fim, minha experiencia com a inteligencia artificial de copiloto!
Bom, fiquei bem feliz ao receber no sábado o convite para o acesso antecipado do programa, estava (estou ainda na real) construindo um site para consumir a API do Github e exibir algumas informações e por coincidência recebi o convite no meio desse processo, mesmo sendo um projeto "simples" a primeira aparição do Copilot foi quase que imediata.
Após a extensão ser instalada, você pode começar a utilizar o copiloto, usando a tag de comentário no Javascript (//) e descrevendo o que você tem intenção de fazer geralmente retorna algo, utilizei as palavras fetch github api e em instantes depois de alguns enters o seguinte código me foi retornado:
function App() {
//fetch data from github API
const [data, setData] = useState(null);
useEffect(() => {
fetch("https://api.github.com/users/sergjun/repos")
.then(response => response.json())
.then(repos => setData(repos))
}, []);
return (
<h2>
Top languages
</h2>
{data && data.map((repo, i) => (
<h4>{repo.name}</h4>
<p>{repo.description}</p>
))}
);
}
export default App;
Um fetch honesto ( ao meu ver de iniciante ) onde ele faz justamente o que se propõe, a única coisa que eu alterei no período em que estava testando foi o retorno do parâmetro do useState (null), por algum motivo esse valor acabava quebrando a aplicação, ao se colocar um retorno de string vazia (" ") ela parava de crashar.
Essa foi a vez que o Copilot mais "deu as caras", no resto do código, não sei se por falha minha, ou dele, ou talvez a "complexidade" da aplicação, ele não palpitou e honestamente, não fez tanta falta, ficou ao meu ver sendo bem parecido com snippets ou trechos de código meio que prontos que as vezes você copia e altera algumas coisas.
Ainda assim, é uma tecnologia muito interessante, que estou curioso para ver como irá evoluir e se comportar nos próximos tempos, é bem interessante ver as soluções propostas por ele, outras pessoas já disseram isso de forma exaustiva mas sempre é bom reforçar, não adianta copiar e colar, em algumas das sugestões, o mesmo fazia a sugestão de utilização de react com classes e de nada adiantaria eu usar um código daquele tipo sendo que nada entenderia.
Links úteis
Como eu falei, sou iniciante nisso tudo, há um mar de informações e diversas referencias pelas quais se pode procurar por ai, estou usando essas e aceito toda e qualquer tipo de contribuição!
Documentação oficial do React
Um texto do Dan Abramov falando sobre Hooks (inglês)
Documentação oficial do React introduzindo hooks
Artigo muito bom falando sobre useEffect que o @ramonrxm me passou, muito obrigado, mais uma vez! (inglês)
Artigo do autor do canal "web dev simplified" falando sobre useEffects, alguns exemplos foram tirados do canal dele, dos vídeos de useState e useEffect, recomendo demais! (inglês)
Top comments (2)
Muito bom!
Top!