Sobes.tech
Junior

O que são state e props no contexto do desenvolvimento em React?

sobes.tech IA

Resposta da IA

State — é o estado interno do componente, um conjunto de dados que pode mudar durante a execução do componente. Alterar o state leva a uma nova renderização do componente.

Props — são parâmetros externos passados ao componente de fora, do componente pai. Os props são imutáveis dentro do componente que os recebe. São usados para configuração e passagem de dados do pai para o filho.

Principais diferenças:

Característica State Props
Fonte Interna ao componente Passadas de fora
Mutabilidade Pode mudar Não pode ser alterado dentro
Objetivo Controlar a vista interna Passar dados e configuração

Exemplo de uso de state:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // Inicialização do state

  return (
    <div>
      <p>Contador: {count}</p>
      <button onClick={() => setCount(count + 1)}>Incrementar</button>
    </div>
  );
}

Exemplo de uso de props:

import React from 'react';

function Greeting(props) {
  return <h1>Olá, {props.name}!</h1>; // Uso de props
}

function App() {
  return <Greeting name="Mundo" />; // Passagem de props
}