Github Copilot, useState e useEffects
Tags: beginners, github, react, learninpublic
Published: 2021-07-20 13:23:29

## Table Of Contents
* [Introdução](#introducao)
* [useState](#useState)
* [useEffect](#useEffect)
* [Github Copilot](#Copilot)
* [Links úteis](#Links)


<div name="introducao">

&nbsp;

<h3>Ps:</h3><p>acabei notando que em todos os trechos de codigo aqui colocados, quando a arrow function é usada <b>=></b> ele esta exibindo os caracteres <b>(=&gt);</b>
Então, toda vez que verem <b>(=&gt);</b> presumam ser => até eu conseguir uma solução para isso.

&nbsp;

&nbsp;
<h2>Introdução<a name="introducao"></a></h2>
&nbsp;

Recentemente, comecei a estudar React no curso do <a href="https://estartandodevs.com.br/" targe="_blank">Estardando Devs</a> e acabamos estudando esses dois hooks primordiais, <b>useState</b> e o <b>useEffect</b>, 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.&nbsp;

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. &nbsp;


Reforçando que, esse texto se limita as minhas opiniões e experiencias;
&nbsp;


Não irei entrar nos conceitos de <b>"O que é hook"</b> ou explicações profundas sobre o <b>React</b>, 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.&nbsp;&nbsp;

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!&nbsp;&nbsp;

</div>
<div id=useState>
&nbsp;

&nbsp;
<h2>useState<a name="useState"></a></h2>
&nbsp;

Pelas minhas pesquisas e por uma leve quantidade de dedução,o <b>useState</b>, é 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 (
        <div> 
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    );
}

```

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 <b>variável</b> e o segundo é uma <b>função</b>,e o trabalho dessa função é basicamente atualizar a variável!


Exemplificando a variável agora que esse exemplo está claro:

<b>const [count, setCount] = useState(0)</b>

<b>const</b> - declaração de que a variável é uma const.
<b>[count, setCount ]</b> - desestruturação do array, onde <b>count</b> é a variável e <b>setCount</b> - é a função que atualiza o estado dessa variável.
<b> useState(0)</b> - passando o parâmetro inicial para a função e consequentemente para a variável, ou seja, <b>count</b> ira começar em <b>(0)</b>


<h4>Reforçando que:</h4>

- useState é um <b>array</b>, mas seu retorno não está limitado a tal, no exemplo acima foi passado um nú mero, porem poderia ter sido passado uma string <b>" "</b> (vazia ou não), ou um objeto <b>{ }</b> (vazio ou não)&nbsp;

- 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 onClick={decrementCount}> - </button>
        <span>{count}</span>
        <span>{theme}</span>
        <button onClick={incrementCount}> + </button> 
        </>
    )
}

```

No código acima, temos dois useState, um para gerenciar a variável <b>count</b> inicialmente declarado como <b>0</b>, e um para gerenciar a variável <b>theme</b>, 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 <b>-</b> a variável <b>count</b> sera subtraída em 1 e a variável <b>theme</b> vai renderizar <b>green</b> na tela, ao clicar no botão de <b>+</b> a variável <b>count</b> sera somada em 1 e a variável <b>theme</b> ira renderizar <b>blue</b>!
&nbsp;

&nbsp;

<div id="useEffect">
<h2>useEffect<a name="useEffect"></a></h2>
&nbsp;

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.&nbsp;

Dada a minha própria limitação, não sera tão extenso quanto o <b>useState</b> foi, mas acredito que ficará claro!&nbsp;

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 (
        <>
            <div>
                <button onClick={() => setResourceType('post')}>Post</button>
                <button onClick={() => setResourceType('users')}>Users</button>
                <button onClick={() => setResourceType('comments')}>Comments</button>
            </div>
            <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, <b>resourceType</b> é a variável e <b>setResourceType</b> a função que atualiza o valor dessa variável, e de inicio está sendo passado uma string vazia para ela <b>( ' ' )</b>.&nbsp;

Logo abaixo dessa declaração, temos um <b>console.log</b> que ira renderizar a palavra <i>render</i>, e em seguida temos o uso do <b>useEffect</b>, 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 <b>console.log</b> com a frase <i>resourceType changed</i>, e no fim do <b>useEffect</b>, temos um array com um parâmetro, nesse caso o <b>resourceType</b>, a nossa variável lá do inicio.&nbsp;

Na ultima parte, temos a renderização, três botoes, cada botão executando a função <b>setResourceType</b> e em cada um deles um parâmetro diferente é passado, no primeiro botão, o parâmetro é o <b>post</b>, no segundo botão, o parâmetro é <b>users</b>, e no terceiro o parâmetro é <b>comments</b>.&nbsp;

A funcionalidade do useEffect no exemplo acima será a seguinte:&nbsp;

Quando esse componente for renderizado, ele ira exibir no console a palavra <i>render</i> devido aquele primeiro console.log, ao se clicar em qualquer um dos botões, o <b>h1</b> da página irá renderizar de acordo com o botão (<b>post </b>ou <b>users</b> ou <b>comments</b>) e ira exibir <i>resourceType changed</i> que estava no segundo console.log dentro do useEffect.&nbsp;

Isso acontece pois, como parâmetro, no useEffect, nos passamos o <b>resourceType</b> dentro daquele array, com isso, o bloco de código dentro do useEffect só sera rodado se o <b>resourceType</b> for modificado!&nbsp;

Se não houvesse parametro no array, e o mesmo estivesse vazio <b>[ ]</b>, o bloco do useEffect seria usado apenas uma vez, durante a primeira renderização!&nbsp;

Se clicar no botão do <b>Post</b> uma vez, quando qualquer um dos dois outros parâmetros (<b>users</b> ou <b>comments</b>) estiver renderizado na tela, as duas mensagens serão exibidas, pois ao clicar no botão você chamou a função <b>setResourceType</b> e assim modificou o <b>resourceType</b> fazendo com que o código do bloco <b>useEffect</b> seja executado, mas se após isso, você clicar novamente no mesmo botão, você tera apenas um dos consoles.log, o de <i>render</i>, fora do useEffect, pois o <b>resourceType</b> segue sem ser modificado, era um <b>Post</b> e você clicando no mesmo botão ele continua sendo um <b>Post</b>, segue inalterado.&nbsp;

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 <b>React class lifecycle methods</b> e <b>componentDidMount, componentDidUpdate, e componentWillUnmount</b> (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).&nbsp;

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!&nbsp;
</div>

&nbsp;

&nbsp;
<div id="github">
<h2>Github Copilot<a name="Copilot"></a></h2>
&nbsp;

Por fim, minha experiencia com a inteligencia artificial de copiloto!&nbsp;

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.&nbsp;

Após a extensão ser instalada, você pode começar a utilizar o copiloto, usando a tag de comentário no Javascript <b>(//)</b> e descrevendo o que você tem intenção de fazer geralmente retorna algo, utilizei as palavras <i>fetch github api</i> 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 (
   <div className="App">
     <h2>
       Top languages
     </h2>
     {data && data.map((repo, i) => (
       <div key={i}>
         <h4>{repo.name}</h4>
         <p>{repo.description}</p>
       </div>
     ))}
   </div>
 );
}

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 (<b>null</b>), por algum motivo esse valor acabava quebrando a aplicação, ao se colocar um retorno de string vazia (<b>" "</b>) ela parava de crashar.&nbsp;

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.&nbsp;

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.
&nbsp;

&nbsp;
</div>

<div id="links">
<h2>Links úteis<a name="Links"></a></h2>
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!
&nbsp;
&nbsp;

<a href="https://pt-br.reactjs.org/docs/getting-started.html" target="_blank">Documentação oficial do React</a>
&nbsp; 
<a href="https://dev.to/dan_abramov/making-sense-of-react-hooks-2eib" target="_blank">Um texto do Dan Abramov falando sobre Hooks (inglês)</a>
&nbsp;
<a href="https://pt-br.reactjs.org/docs/hooks-intro.html" target="_blank">Documentação oficial do React introduzindo hooks</a>
&nbsp;
<a href="https://javascript.plainenglish.io/react-hooks-how-to-use-useeffect-ecea3e90d84f" target="_blank">Artigo muito bom falando sobre useEffect que o @ramonrxm me passou, muito obrigado, mais uma vez! (inglês)</a>
&nbsp;
<a href="https://blog.webdevsimplified.com/2020-04/use-effect/" target="_blank">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)</a>



</div>