useState e useEffect

Vamos explorar o Módulo 11: React Avançado com um foco detalhado nos conceitos de Hooks em React (como useState e useEffect), além de como gerenciar eventos e propriedades em componentes React. Este módulo aborda tópicos que são essenciais para criar aplicações interativas e reativas em React.

1. Hooks em React

O que são Hooks?

Hooks são funções que permitem "ligar" o estado e outros recursos do React a componentes funcionais. Antes do React 16.8, apenas componentes de classe podiam ter estado e lidar com ciclos de vida. Com os hooks, agora você pode usar o estado e outros recursos do React sem escrever uma classe.

useState

O hook useState é o hook mais básico para adicionar estado a componentes funcionais. Ele retorna um array com dois valores:

• O valor atual do estado.
• A função que permite atualizar o valor do estado.

Sintaxe:

const [state, setState] = useState(initialState);

• state: o valor atual do estado.
• setState: a função para atualizar o valor do estado.
• initialState: valor inicial do estado.

Exemplo:

import React, { useState } from 'react';

function Counter() {
  // Declara um estado chamado 'count', com valor inicial 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Explicação:

• useState(0) inicializa o estado count com valor 0.
• Quando o botão é clicado, a função setCount é chamada para atualizar o estado, o que faz o componente ser re-renderizado com o novo valor de count.

useEffect

O hook useEffect é usado para realizar efeitos colaterais em componentes funcionais. Efeitos colaterais podem ser qualquer coisa que afete o mundo fora do componente, como buscar dados em uma API, atualizar o DOM diretamente, ou configurar um temporizador.

Sintaxe:

useEffect(() => {
  // Código a ser executado após o componente renderizar
  return () => {
    // Função de limpeza (opcional) que será chamada quando o componente for desmontado
  };
}, [dependencies]);

• O primeiro argumento de useEffect é a função de efeito que será executada.
• O segundo argumento é uma lista de dependências. O efeito só será executado se algum valor nesta lista mudar.
  • Se a lista estiver vazia ([]), o efeito será executado apenas uma vez, após a primeira renderização (semelhante ao componentDidMount nas classes).
  • Se a lista de dependências contiver variáveis, o efeito será executado sempre que essas variáveis mudarem.

Exemplo:

import React, { useState, useEffect } from 'react';

function FetchData() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(error => console.error('Error fetching data:', error));
  }, []); // O efeito só executa uma vez quando o componente é montado

  if (loading) return <p>Loading...</p>;

  return (
    <div>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

Explicação:

• O useEffect faz a requisição de dados quando o componente é montado, apenas uma vez, devido à lista de dependências vazia ([]).
• Quando os dados são carregados, o estado data é atualizado com os dados da API, e a tela é re-renderizada.

Comportamento de Limpeza no useEffect

Às vezes, você pode precisar limpar recursos quando um componente for desmontado ou quando o efeito for re-executado. Isso pode ser feito retornando uma função de limpeza dentro do useEffect.

Exemplo de limpeza:

useEffect(() => {
  const timer = setTimeout(() => {
    console.log('This will run after 1 second');
  }, 1000);

  // Função de limpeza
  return () => clearTimeout(timer);
}, []); // Esse efeito será chamado apenas uma vez, então a função de limpeza é executada quando o componente é desmontado

2. Gerenciamento de Eventos e Propriedades

Eventos em React

No React, você pode gerenciar eventos usando as sintaxes de eventos do JavaScript com algumas modificações. Todos os eventos em React seguem uma convenção de nomenclatura camelCase (por exemplo, onClick, onChange).

Exemplo de Evento em React:

import React, { useState } from 'react';

function Button() {
  const [message, setMessage] = useState('');

  const handleClick = () => {
    setMessage('Botão clicado!');
  };

  return (
    <div>
      <button onClick={handleClick}>Clique aqui</button>
      <p>{message}</p>
    </div>
  );
}

Explicação:

• O evento onClick chama a função handleClick quando o botão é clicado.
• setMessage atualiza o estado com a mensagem "Botão clicado!", e a renderização do componente é atualizada com o novo valor de message.

Propriedades em React

As propriedades (props) em React são um mecanismo de passagem de dados entre componentes. Elas permitem que você passe dados do componente pai para o componente filho.

Exemplo de Propriedade:

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return <Welcome name="João" />;
}

Explicação:

• O componente Welcome recebe props como argumento e acessa a propriedade name.
• O componente App passa a propriedade name="João" para o componente Welcome, que a exibe como parte do conteúdo.

Prop Drilling

Prop drilling é o termo usado quando você precisa passar dados através de vários componentes intermediários até que o dado chegue no componente de destino. Isso pode tornar o código difícil de manter quando os dados precisam ser passados por vários níveis de componentes.

Exemplo de Prop Drilling:

function Parent() {
  const [name, setName] = useState('Alice');
  return <Child name={name} />;
}

function Child({ name }) {
  return <Grandchild name={name} />;
}

function Grandchild({ name }) {
  return <h1>Hello, {name}!</h1>;
}

Explicação:

• O estado name é passado de Parent para Child e depois para Grandchild. Isso é um exemplo simples de prop drilling.

Resumo

• useState: Permite adicionar estado a componentes funcionais.
• useEffect: Permite realizar efeitos colaterais como requisições de API ou atualizações no DOM.
• Eventos em React: Usados para responder a interações do usuário, como cliques e mudanças em campos de formulário.
• Propriedades (props): São usadas para passar dados entre componentes em React.

Esses conceitos são fundamentais para construir aplicações interativas e dinâmicas com React. Se precisar de mais detalhes ou exemplos, posso continuar ajudando!