Sobre pegar os valores do formulario... | React: desenvolvendo com JavaScript

Se minha dúvida parecer boba, peco desculpas, é a primeira vez que vejo qualquer coisa sobre React... Mas vamos lá, minha questão é a seguinte, por que fizemos essa volta toda, usando esse useState('') e os setNome, setCargo etc ao invés de simplesmente pegar o value desse input?

Minha outra dúvida, não entendi muito bem a lógica dessa parte: Parece que ao declarar uma constante ela recebe parâmetros.... em fim, não ficou claro pra mim, essa é uma sintaxe especifica para useState()?

  const [nome, setNome] = useState('')
  const [cargo, setCargo] = useState('')
  const [imagem, setImagem] = useState('')
  const [time, setTime] = useState('')

Acredito que com um pouco mais de prática e estudo vou entender um pouco mais esse ambiente React, mas até aqui achei ele bem diferente e estou tendo dificuldade para assimilar as coisas.

Salve, Helena! Como vai?

Vamos por partes:

Uso do useState('')

Aqui precisamos ir um pouco mais fundo na teoria. Componentes são funções, certo? A única coisa de especial que temos nessa função é que ela retorna JSX.

Agora, visto que nosso componente é uma função... ela precisa ser chamada em algum lugar, e nós não fizemos isso. Nós indicamos ao React que queremos inserir um elemento em determinado lugar, por exemplo, <Formulario />. E o React executa a funcão.

Depois de avaliar toda a cadeia de componentes, "chamar" todas funções que criamos que representam componentes, o React transforma tudo isso em instruções que renderizam os elementos na tela.

E tudo isso é feito quando a página é recarregada. Depois que temos a página já renderizada, essas funções não são chamadas novamente.

Nós utilizamos o useState justamente pra indicar pro React que, quando algo mudar, aquele componente precisa ser reavaliado e renderizado novamente.

Percebeu a necessidade do useState? Basicamente, utilizamos quando precisamos que o componente tenha seus elementos atualizados no DOM caso alguma exista alguma alteração em determinados estados.

Sintaxe const [nome, setNome] = useState('')

Vamos por partes aqui também.

Primeiro, precisamos entender a diferença entre let, var e const. Esse é um tema tão interessante, que existe esse artigo falando sobre isso, e eu recomendo formente a leitura :)

Isso é JavaScript puro, não tem nada de React ainda.

Depois que você terminar de ler o artigo, podemos seguir aqui.

o useState vai retornar um array com dois itens:

Posição 1	Posição 2
Valor do Estado	Função para alterar o estado

No caso do nome: [nome, setNome]

Onde nome é o valor em si do nome, e o setNome é uma função de atribuição de valor.

Isso acontece porque se fizermos:

const [nome, setNome] = useState('Vinicios')
// ... restante do código
nome = 'Neves'

Não vai funcionar, precisamos fazer:

const [nome, setNome] = useState('Vinicios')
// ... restante do código
setNome('Neves')

Dessa forma o React atualiza o estado e aí nos conectamos com o tema da pergunta anterior.

Agora, sobre essa sintaxe:

const [nome, setNome] = useState('Vinicios')

Aqui também estamos falando de JavaScrip puro, e o nome dessa técnica é destructuring.

Para entender a fundo o que ela faz, eu re recomendo esse video da Ju Negreiros, ela explica com detalhes o que está acontecendo.

Espero que eu tenha conseguido responder todas as suas dúvidas :)