Dúvidas sobre useState e valores | React: desenvolvendo com JavaScript

Sempre que eu aplico o useState, a primeira resposta que o código me dá é de um array vazio, no entanto, quando eu submeto pela segunda vez ele mostra os dados atualizados. Porém se eu faço alguma alteração e salvo, ele retorna com os dados anteriores, e assim vai.

Gostaria muito de saber o pq dessa interação, talvez seja algo que eu não peguei direito, vou colocar o código que estou usando tanto no App.js quanto no Formulario.js para exemplificar como o código está escrito.

App.js
import { useState } from "react";
import { Banner, Form } from "./components";

function App() {

  const [team, setTeam] = useState([]);

  const onFormSubmit = (value) => {
    console.log(team);
    setTeam([...team, value]);
  };

  return (
    <div className="App">
      <Banner />
      <Form onSubmitted={value => onFormSubmit(value)} />
    </div>
  );
}

export default App;

Form.js
import { useState } from "react";

import "./index.css";
import TextBox from "../TextBox";
import DropDown from "../DropDown";
import Button from "../Button";

const Form = ({ onSubmitted }) => {

  const teams = [
    'Programação',
    'Front-End',
    'Data Science',
    'Devops',
    'UX e Design',
    'Mobile',
    'Inovação e Gestão'
  ];

  const [name, setName] = useState('');
  const [role, setRole] = useState('');
  const [image, setImage] = useState('');
  const [team, setTeam] = useState('');

  const onSave = (event) => {
    event.preventDefault();
    onSubmitted({ name, role, image, team });
  };

  return (
    <section className="formContainer">
      <form onSubmit={onSave}>
        <h2>Preencha os dados para criar o card do colaborador.</h2>
        <TextBox
          value={name}
          onUpdate={value => setName(value)}
          required={true}
          label="Nome"
          placeholder="Digite seu nome"
        />
        <TextBox
          value={role}
          onUpdate={value => setRole(value)}
          required={true}
          label="Cargo"
          placeholder="Digite seu cargo"
        />
        <TextBox
          value={image}
          onUpdate={value => setImage(value)}
          required={true}
          label="Imagem"
          placeholder="Informe o endereço da imagem"
        />
        <DropDown
          value={team}
          onUpdate={value => setTeam(value)}
          required={true}
          label="Time"
          items={teams}
        />
        <Button>Criar card</Button>
      </form>
    </section>
  );
};

export default Form;

Olá, Fabio!

Pelo código que você compartilhou, parece que você está usando o useState corretamente. No entanto, a primeira vez que você chama o console.log(team), ele mostra um array vazio porque o useState é assíncrono. Isso significa que, quando você chama setTeam([...team, value]), o estado não é atualizado imediatamente. Portanto, quando você chama console.log(team) logo em seguida, ainda está exibindo o valor antigo.

Se quiser reagir a alteração do seu estado, para fins de estudo, você pode usar o useEffect para monitorar as alterações no estado e executar uma ação sempre que o estado for atualizado. Por exemplo:

import { useState, useEffect } from "react";

function App() {
  const [team, setTeam] = useState([]);

  useEffect(() => {
    console.log(team);
  }, [team]);

  const onFormSubmit = (value) => {
    setTeam([...team, value]);
  };

  // Resto do código...
}

Dessa forma, toda vez que o estado team for atualizado, o console.log será chamado e você verá o valor atualizado.

Depois, se quiser, dá uma olhada nesse artigo que pode te ajudar com seus estudos em React.

Espero que isso ajude! Se tiver mais alguma dúvida, é só me dizer. Bons estudos!

Chegou a hora de transformar