Qual a necessidade de usar estado?

Oi Raphael, tudo bem?

Desculpe a demora em retornar.

Primeiramente, parabéns por refazer o projeto para consolidar seus conhecimentos em React! É sempre importante praticar e entender bem os conceitos para poder aplicá-los de forma efetiva em projetos maiores.

Sobre sua pergunta, é importante entender que o estado é uma das principais ferramentas que o React disponibiliza para gerenciar o comportamento e a renderização dos componentes. Em resumo, o estado é um objeto que armazena dados que podem ser atualizados e refletidos na interface do usuário.

Ao utilizar o evento.target.value para exibir os livros buscados na tela dinamicamente, você está de fato alterando o conteúdo da página, mas de uma forma que não é sustentável em projetos maiores. Imagine que você tenha uma página com vários componentes que precisam ser atualizados dinamicamente, a cada interação do usuário. Sem utilizar o estado, seria necessário atualizar diretamente o DOM toda vez que uma mudança fosse feita, o que tornaria o código muito difícil de gerenciar e aumentaria consideravelmente a complexidade.

Com o uso do estado, no entanto, podemos atualizar os dados em um único lugar e deixar que o React cuide de atualizar o DOM para nós. Por exemplo, suponha que você tenha um componente de formulário que precise armazenar o nome, o email e a mensagem do usuário. Você poderia fazer algo assim:

import React, { useState } from 'react';

function ContatoForm() {
  const [nome, setNome] = useState('');
  const [email, setEmail] = useState('');
  const [mensagem, setMensagem] = useState('');

  function handleSubmit(event) {
    event.preventDefault();
    // Aqui você poderia enviar os dados do formulário para o servidor
  }

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="nome">Nome:</label>
      <input type="text" id="nome" value={nome} onChange={event => setNome(event.target.value)} />

      <label htmlFor="email">Email:</label>
      <input type="email" id="email" value={email} onChange={event => setEmail(event.target.value)} />

      <label htmlFor="mensagem">Mensagem:</label>
      <textarea id="mensagem" value={mensagem} onChange={event => setMensagem(event.target.value)} />

      <button type="submit">Enviar</button>
    </form>
  );
}

Nesse exemplo, utilizamos o useState para criar três estados diferentes (nome, email e mensagem) e os conectamos aos inputs do formulário através do value e do onChange. A cada vez que um desses valores é alterado, o componente é renderizado novamente com os dados atualizados.

Assim, sempre que o usuário preencher o formulário, os dados serão armazenados em estados diferentes e poderão ser enviados para o servidor quando o botão de envio for clicado. Dessa forma, o React é responsável por atualizar a interface do usuário com as novas informações e mantém todo o código organizado e fácil de entender.

Em resumo, o uso do estado é fundamental em projetos React para gerenciar e atualizar dados de forma eficiente e sustentável. Embora seja possível fazer algumas coisas sem o uso do estado, como no exemplo que você mencionou, em projetos maiores e mais complexos o uso do estado se torna essencial para manter o código organizado e fácil de manter.

Esper