Props e State (estado)

Neste capítulo vou falar um pouco sobre como funciona Props (propriedades) e state (estado) de um componente no React. É importante saber a diferença entre os dois e como eles funcionam, pois são a base de qualquer aplicação React e são utilizados na maioria dos cenários.

Props

Props é uma abreviação de properties (propriedades). É uma forma de trafegar dados entre components do React, podemos enviar do elemento pai para o filho.

O primeiro elemento está enviando as propriedades a,b,c para o segundo elemento. Reparem que depois é apenas uma desestruturação para pegar os valores. Imaginando um cenário real, ficaria da seguinte maneira:

const ElementoPai = () => {
  return (
    <ElementoFilho a="1" b="2" c="3" />
  )
}

const ElementoFilho = ({ a, b, c }) => {
  return (
    <div>
      <p>{a}</p>
      <p>{b}</p>
      <p>{c}</p>
    </div>
  )
}

Simples, não?!

E o que posso passar como parâmetro para o próximo elemento?

• String
• Number
• Boolean
• Array
• Object
• Function
• Component
• E uma infinidade de outras coisas.

React é bastante versátil e permite que você passe qualquer coisa como parâmetro para o próximo elemento.

info

Não é possível enviar de volta os valores do elementoFilho para o elementoPai através de propriedades. Podemos fazer isso via callbacks, storage, context e algumas outras formas.

State

State é o estado do componente. É uma forma de armazenar dados dentro do componente. É um objeto que pode ser alterado e quando alterado, o componente é renderizado novamente.

O estado de um componente é simplesmente uma variável que armazena um valor. Quando o valor é alterado o componente sofre alterações, uma dela é a renderização novamente. Pense no estado como uma foto do componente em um determinado momento, quando algo acontece que modifica essa foto é tirada uma nova foto, dando continuidade ao ciclo de vida.

Acima um exemplo beeeem simplificado do ciclo de vida do React. Quando o componente é renderizado pela primeira vez, o state é criado e o componente é renderizado. Quando o state é alterado, o componente é renderizado novamente.

const Elemento = () => {
  const [state, setState] = useState(0)

  return (
    <div>
      <p>{state}</p>
      <button onClick={() => setState(state + 1)}>Adicionar</button>
    </div>
  )
}

O controle do estado do componente é feito por Hooks do React, no caso acima o useState. Este Hook é um dos mais utilizados e é responsável por criar o estado e a função que altera o estado.

Ele possui duas posições em um array, a primeira é a variável que armazena o valor e a segunda é a função que faz a modificação desta variável. Repare que o Hook também permite inicializar com um valor, mas isso não é obrigatório. Pode ser vazio, undefined, null, boolean, function ou qualquer outro valor que possa ser atribuído a uma variável.

Iniciar ou não com um estado vai depender da sua necessidade.

Realizando controle do componente através do estado ele modifica a si mesmo, mas também pode realizar efeitos em outros componentes. Isso é feito através de props.

tip

Pense sempre em um simples variável enviando seus valores para um componente que vai recebê-los como propriedades. Dessa maneira as coisas ficam um pouco mais simples

Exemplo

import { useState } from 'react'

const ElementoPai = () => {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>{count}</p>
      <ElementoFilho count={count} setCount={setCount} />
    </div>
  )
}

const ElementoFilho = ({ count, setCount }) => {
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Adicionar</button>
    </div>
  )
}

export default ElementoPai

No exemplo acima criei um simples contador, onde o elemento pai é responsável por criar o estado e o elemento filho é responsável por alterar o estado (clicks somando +1).

É importante realizar uma separação bem clara entre componentes que possuem estado e os que não possuem, comumente chamados de Dumb e Smart components.

Componentes devem possuir apenas suas responsabilidades e serem o mais simples e reutilizáveis possíveis. Deixá-los simples nem sempre é fácil mas é possível aplicando boas práticas de programação, como Clean Code.