--- id: 67c2bbd476f6e540b4c0b0d4 title: Revisão de State e Hooks do React challengeType: 31 dashedName: review-react-state-and-hooks --- # --description--

Trabalhando com Eventos em React

• Sistema de Evento Sintético: Esta é a forma do React de lidar com eventos. Ele funciona como um invólucro em torno dos eventos nativos como os eventos click, keydown e submit. Os manipuladores de eventos no React usam a convenção de nomenclatura em camel case. (Ex. onClick, onSubmit, etc)

Aqui está um exemplo de uso do atributo onClick para um elemento button no React:

function handleClick() {
  console.log("Button clicked!");
}

<button onClick={handleClick}>Click Me</button>;

No React, funções manipuladoras de eventos geralmente começam com o prefixo handle para indicar que são responsáveis por lidar com eventos, como handleClick e handleSubmit. Quando uma ação do usuário dispara um evento, o React passa um objeto Synthetic Event para o seu manipulador. Esse objeto se comporta de forma muito semelhante ao objeto Event nativo do JavaScript puro, fornecendo propriedades como type, target e currentTarget. Para evitar comportamentos padrão como o refresh do navegador durante um evento onSubmit, por exemplo, você pode chamar o método preventDefault():

function handleSubmit(event) {
  event.preventDefault();
  console.log("Form submitted!");
}

<form onSubmit={handleSubmit}>
  <input type="text" />
  <button>Submit</button>
</form>;

Você também pode envolver uma função handler em uma função arrow assim:

function handleDelete(id) {
  console.log("Deleting item:", id);
}

<button onClick={() => handleDelete(1)}>Delete Item</button>;

Trabalhando com State e o Hook useState

• Definição para state: Em React, state é um objeto que contém dados para um componente. Quando o state é atualizado, o componente será re-renderizado. React trata o state como imutável, o que significa que você não deve modificá-lo diretamente.
• Hook useState(): O hook useState é uma função que permite declarar variáveis de estado em componentes funcionais. Aqui está a sintaxe básica:

const [stateVariable, setStateFunction] = useState(initialValue);

Na variável de estado você tem o seguinte:

• stateVariable mantém o valor do estado atual
• setStateFunction (a função setter) atualiza a variável de estado
• initialValue define o estado inicial

Aqui está um exemplo completo para um componente Counter:

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>{count}</h2>

      <button onClick={() => setCount(count - 1)}>Decrement</button>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

Renderização e Componentes React

• Definição: No React, renderizar é o processo pelo qual os componentes aparecem na interface do usuário (UI), geralmente no navegador. O processo de renderização consiste em três etapas: trigger, render e commit.

A fase de gatilho ocorre quando o React detecta que algo mudou e a interface do usuário (UI) pode precisar ser atualizada. Essa mudança geralmente ocorre devido a uma atualização no state ou props. Uma vez que o gatilho acontece, o React entra na fase de renderização. Aqui, o React reavalia seus componentes e determina o que exibir. To do this, React uses a lightweight copy of the "real" DOM called the virtual DOM. Com o virtual DOM, o React pode verificar rapidamente o que precisa mudar no componente. A etapa de commit é onde o React pega as mudanças preparadas do virtual DOM e as aplica no DOM real. Em outras palavras, esta é a etapa onde você vê o resultado final na tela.

Atualizando Objetos e Arrays no State

• Atualizando Objetos no State: Se você precisar atualizar um objeto no state, então você deve criar um novo objeto ou copiar um objeto existente primeiro, depois definir o state para esse novo objeto. Qualquer objeto colocado no state deve ser considerado somente leitura. Aqui está um exemplo de como definir o nome, idade e cidade de um usuário. A função handleChange é usada para lidar com as atualizações das informações do usuário:

import { useState } from "react";

function Profile() {
  const [user, setUser] = useState({ name: "John Doe", age: 31, city: "LA" });

  const handleChange = (e) => {
    const { name, value } = e.target;

    setUser((prevUser) => ({...prevUser, [name]: value}));
  };

  return (
    <div>
      <h1>User Profile</h1>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
      <p>City: {user.city}</p>

      <h2>Update User Age </h2>
      <input type="number" name="age" value={user.age} onChange={handleChange} />

      <h2>Update User Name </h2>
      <input type="text" name="name" value={user.name} onChange={handleChange} />

      <h2>Update User City </h2>
      <input type="text" name="city" value={user.city} onChange={handleChange} />
    </div>
  );
}

export default Profile;

• Atualizando Arrays no State: Ao atualizar arrays no state, é importante não modificar diretamente o array usando métodos como push() ou pop(). Em vez disso, você deve criar um novo array ao atualizar o state:

const addItem = () => {
  const newItem = {
    id: items.length + 1,
    name: Item ${items.length + 1},
  };

  // Creates a new array
  setItems((prevItems) => [...prevItems, newItem]);
};

Se você quiser remover itens de um array, deve usar o método filter(), que retorna um novo array após filtrar o que você deseja remover:

const removeItem = (id) => {
  setItems((prevItems) => prevItems.filter((item) => item.id !== id));
};

Referenciando Valores Usando Refs

• Atributo ref: Você pode acessar um nó DOM no React usando o atributo ref. Aqui está um exemplo para mostrar um ref para focar um elemento input. A propriedade current é usada para acessar o valor atual desse ref:

import { useRef } from "react";

const Focus = () => {
  const inputRef = useRef(null);

  const handleFocus = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="Enter text" />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
};

export default Focus;

Trabalhando com o Hook useEffect

• useEffect() Hook: In React, an effect is anything that happens outside the component rendering process. Ou seja, qualquer coisa que o React não gerencie diretamente como parte da renderização da UI. Exemplos comuns incluem buscar dados, atualizar o título da aba do navegador, ler ou gravar no armazenamento local do navegador, obter a localização do usuário e muito mais. Essas operações interagem com o mundo externo e são conhecidas como efeitos colaterais. React fornece o hook useEffect para permitir que você lide com esses efeitos colaterais. useEffect permite que você execute uma função após o componente renderizar ou atualizar.

import { useEffect } from "react";

useEffect(() => {
 // Your side effect logic (usually a function) goes here
}, [dependencies]);

A função de efeito é executada após o componente renderizar, enquanto o argumento opcional dependencies controla quando o efeito é executado. Observe que dependencies pode ser um array de "valores reativos" (state, props, functions, variables e assim por diante), um array vazio ou ser omitido completamente. Aqui está como todas essas opções controlam como useEffect funciona:

• Se dependencies for um array que inclui um ou mais valores reativos, o efeito será executado sempre que eles mudarem.
• Se dependencies for um array vazio, useEffect executa apenas uma vez quando o componente é renderizado pela primeira vez.
• Se você omitir dependencies, o efeito será executado toda vez que o componente renderizar ou atualizar.

Como Criar Hooks Personalizados

• Custom Hooks: Um hook customizado permite que você extraia lógica reutilizável de componentes, como busca de dados, gerenciamento de estado, alternância e efeitos colaterais como monitoramento do status online. No React, todos os hooks internos começam com a palavra use, então seu hook customizado deve seguir a mesma convenção.

Aqui está um exemplo de como criar um hook useDebounce:

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

export { useDebounce };

# --assignment-- Revise os tópicos e conceitos de estado e hooks do React.