Componentes, Props, State e Ciclo de Vida no React: Guia Prático para Iniciantes

O React revolucionou o desenvolvimento front-end ao introduzir o conceito de componentização: quebrar interfaces em pedaços reutilizáveis e independentes, chamados de componentes. Para quem está começando, entender como funcionam os componentes, props, estado (state) e o ciclo de vida é essencial para criar interfaces modernas e dinâmicas com eficiência.

Neste artigo, você vai aprender o que são esses conceitos, como usá-los na prática e por que eles são tão importantes no desenvolvimento com React.

O que são Componentes no React?

Componentes são blocos reutilizáveis de código que retornam elementos de interface (JSX). Eles podem ser:

• Funcionais: baseados em funções.
• De classe (menos usados hoje): baseados em classes ES6.

Exemplo de componente funcional:

function Saudacao() {
  return <h1>Olá, visitante!</h1>;
}

Como usar:

<Saudacao />

Componentes facilitam a reutilização e a organização do código, promovendo modularidade.

Props: Passando Dados para Componentes

Props (propriedades) permitem passar dados de um componente pai para um componente filho, funcionando como parâmetros de uma função.

Exemplo:

function Saudacao(props) {
  return <h1>Olá, {props.nome}!</h1>;
}

// Uso:
<Saudacao nome="Lucas" />

As props são imutáveis dentro do componente — ou seja, não podem ser alteradas diretamente.

State: Gerenciando Estado Interno

Enquanto props vêm de fora, o state representa dados internos do componente, geralmente associados a interações do usuário, como cliques, formulários, etc.

Com componentes funcionais, usamos o Hook useState para gerenciar estado.

Exemplo:

import { useState } from 'react';

function Contador() {
  const [contador, setContador] = useState(0);

  return (
    <div>
      <p>Você clicou {contador} vezes</p>
      <button onClick={() => setContador(contador + 1)}>
        Clique aqui
      </button>
    </div>
  );
}

O React atualiza automaticamente a interface sempre que o estado muda, criando experiências dinâmicas e reativas.

Ciclo de Vida dos Componentes

O ciclo de vida define as fases que um componente percorre: montagem, atualização e desmontagem. Em componentes funcionais, usamos o Hook useEffect para executar efeitos colaterais como chamadas de API, timers ou manipulações diretas do DOM.

🕒 Exemplo com useEffect:

import { useState, useEffect } from 'react';

function Relogio() {
  const [hora, setHora] = useState(new Date().toLocaleTimeString());

  useEffect(() => {
    const timer = setInterval(() => {
      setHora(new Date().toLocaleTimeString());
    }, 1000);

    return () => clearInterval(timer); // Limpeza na desmontagem
  }, []);

  return <p>Hora atual: {hora}</p>;
}

O useEffect com array de dependências vazio ([]) equivale ao componentDidMount e componentWillUnmount das classes — ou seja, roda uma vez na montagem e limpa na desmontagem.

Dicas rápidas para iniciantes:

• Quebre sua interface em pequenos componentes reutilizáveis.
• Use props para comunicação de cima para baixo (pai → filho).
• Use state quando precisar controlar interações e dados internos.
• Controle efeitos colaterais com useEffect, sempre pensando no ciclo de vida do componente.

Conclusão

Dominar os conceitos de componentes, props, state e ciclo de vida no React é o primeiro passo para se tornar um desenvolvedor front-end eficiente. Esses fundamentos são a base para projetos escaláveis e bem estruturados. Ao compreendê-los e praticá-los com pequenos exemplos, você avança rapidamente para criar interfaces mais ricas, interativas e organizadas.

📘 Conteúdo adaptado do livro/capítulo React JS: Guia Completo para o Desenvolvedor Front-End.