Artigo original: React.js for Beginners — Props and State Explained

O React.js é uma das bibliotecas do JavaScript mais utilizadas, que todo desenvolvedor de front-end deveria conhecer. Entender o que são props e state e qual a diferença entre eles é um grande passo para se aprender React.

Neste artigo, explicarei o que são props e state. Esclarecerei, também, algumas das perguntas mais frequentes sobre eles:

  • O que são props?
  • Como passar dados com props?
  • O que é state?
  • Como atualizar o state de um componente?
  • O que acontece quando o state muda?
  • Eu posso usar state em todos os componentes?
  • Quais são as diferenças entre props e state?
Se você é um completo iniciante em React, eu tenho uma série de tutoriais (em inglês) sobre React para iniciantes.

O que são props?

Props é uma forma reduzida de dizer propriedades. Elas são usadas para passar dados entre componentes. O fluxo de dados do React entre componentes é unidirecional (somente do componente pai para o componente filho).

Como passar dados com props?

Aqui está um exemplo de como dados podem ser passados usando props:

class ComponentePai extends Component {    
    render() {    
        return (        
            <ComponenteFilho nome="Primeiro filho" />    
        );  
    }
}

const ComponenteFilho = (props) => {    
    return <p>{props.nome}</p>; 
};

Primeiramente, precisamos definir alguns dados do componente pai e atribui-los ao atributo props de um componente filho.

<ComponenteFilho nome="Primeiro filho" />

"nome" é a prop definida aqui e contém dados de texto. Então, podemos passar dados com props como se estivéssemos passando um argumento para uma função:

const ComponenteFilho = (props) => {  
  // seu código
};

Por fim, usamos a notação de ponto para acessar o dado da prop e renderizá-lo:

return <p>{props.nome}</p>;

Você também pode assistir meu vídeo (em inglês) para ver como usar props:

O que é state?

O React possui outro objeto interno especial chamado state (em português, estado), que permite que componentes criem e gerenciem seus próprios dados. Então diferente das props, componentes não podem passar dados com state, mas podem criá-los e gerenciá-los internamente.

Aqui está um exemplo de como usar state:

class Test extends React.Component {    
    constructor() {    
        this.state = {      
            id: 1,      
            nome: "test"    
        };  
    }    
    
    render() {    
        return (      
            <div>        
              <p>{this.state.id}</p>        
              <p>{this.state.nome}</p>      
            </div>    
        );  
    }
}

Como atualizar o state de um componente?

O state não deve ser modificado diretamente, mas pode ser modificado com um método especial chamadao setState().

this.state.id = "2023"; // errado

this.setState({         // certo  
    id: "2023"
});

O que acontece quando o state muda?

Por que temos que usar o setState()? Por que precisamos do objeto state? Se você está se perguntando isso, não se preocupe – você entenderá em breve o uso do state. 🙂 Vamos responder essas perguntas.

Uma mudança no state acontece baseada no input do usuário, acionando um evento ou assim por diante. Além disso, componentes do React (com state) são renderizados com base nos dados do state. Ele detém as informações iniciais.

Então, quando o state muda, o React é notificado imediatamente e atualiza o DOM – não todo o DOM, somente o DOM do componente com o state atualizado. Essa é uma das razões pelas quais o React é tão rápido.

Como o React é notificado? Você adivinhou: com setState(). O método setState() aciona o processo de renderização para atualização das partes. O React é notificado, identifica qual parte alterar e faz isso rapidamente sem renderizar todo o DOM novamente.

Em resumo, há 2 pontos importantes que precisamos saber ao usarmos o state:

  • O state não deve ser modificado diretamente – setState() deve ser usado para isso
  • O uso do state afeta o desempenho da sua aplicação. Portanto, não deve ser usado desnecessariamente.

Posso usar state em todos os componentes?

Outra coisa que você pode estar se perguntando sobre o uso do state é onde exatamente podemos usá-lo. No início, states só podiam ser usados em componentes de classe, não em componentes funcionais.

Esse é o motivo pelo qual componentes funcionais também eram conhecidos como stateless components (em português, componentes sem estado). Entretanto, depois da introdução dos React Hooks, os states podem ser usados agora em componentes de classe e funcionais.

Se o seu projeto não está usando React Hooks, você só pode usar state em componentes de classe.

Qual a diferença entre props e state?

Vamos recapitular e ver as principais diferenças entre props e state:

  • Componentes recebem dados de fora com props, podendo criar e gerenciar seus próprios dados com state
  • Props são usadas ​​para passar dados, enquanto state serve para gerenciar dados
  • Dados de props são somente leitura e não podem ser modificados por um componente que os está recebendo de fora
  • Os dados de state podem ser modificados por seu próprio componente, mas são privados (não podem ser acessados ​​de fora)
  • Props só podem ser passadas do componente pai para o filho (fluxo unidirecional)
  • A modificação do state deve acontecer com o uso do método setState ()

Espero que este artigo tenha ajudado você a entender props e state. Existem outras coisas importantes para se ver sobre React, Eu continuarei escrevendo sobre elas nos meus próximos artigos.

Se você quer aprender mais sobre desenvolvimento para a web, sinta-se à vontade para seguir o autor no YouTube!

Obrigado pela leitura!