Como props e state funcionam no React Native?

Question

Accepted Answer

**Props** e **state** são conceitos React principais que funcionam identicamente no React Native: **props** passam dados para um componente (inputs somente leitura), enquanto **state** mantém dados que podem mudar ao longo do tempo (disparando re-renderizações). Entendê-los é fundamental. ## Props — dados passados (somente leitura) ```jsx // props are inputs passed to a component (from its parent) — READ-ONLY function UserCard({ name, age }) { // receives props return {name}, {age}; } // pass props when using the component // → props flow DOWN (parent → child); a component doesn't change its own props ``` ## State — dados que mudam (via useState) ```jsx import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); // declare state + its setter return ( setCount(count + 1)}> {count} {/* uses state */} ); } // → calling setCount updates state → component RE-RENDERS with the new value ``` State é dado interno e mutável; atualizá-lo (via o setter do `useState`) dispara uma re-renderização — como a UI reflete mudanças. ## Props vs state ```text PROPS → passed IN from the parent; READ-ONLY (the component doesn't change them); for configuration/data from outside STATE → internal to the component; CHANGEABLE (via setState/useState); triggers re-renders; for data that changes over time (user input, toggles, fetched data) → Data flows DOWN via props; state changes drive UI updates. (Same as React for web.) ``` ## Por que isso importa Entender props e state é fundamental no React Native porque são **conceitos React principais centrais para como componentes funcionam e como UIs são atualizadas**, então é conhecimento obrigatório. **Props** (dados somente leitura passados para um componente do seu pai, fluindo para baixo na árvore de componentes) são como componentes recebem configuração e dados de fora, permitindo componentes reutilizáveis e compostos. **State** (dado interno e mutável gerenciado via o hook `useState`, onde atualizá-lo dispara uma re-renderização) é como componentes mantêm e respondem a dados que mudam ao longo do tempo (entrada do usuário, toggles, dados buscados) — o mecanismo pelo qual UIs refletem mudanças. Entender a **distinção** — props passadas e somente leitura (para dados/configuração externos) versus state sendo interno e mutável (para dados que mudam, disparando re-renderizações) — e o princípio que **dados fluem para baixo via props enquanto mudanças de state disparam atualizações de UI** é fundamental para construir apps React Native (e React) corretamente. Estes são exatamente os mesmos conceitos que React para web, então entendê-los é transferível diretamente e é essencial para qualquer um construindo componentes React Native. Obter props e state corretos (passando dados via props, gerenciando dados que mudam com state, entendendo o fluxo de dados unidirecional) é essencial para componentes funcionais e corretos. Como props e state são centrais para como componentes React Native (e React) funcionam — recebendo dados (props) e gerenciando mudanças (state) para disparar atualizações de UI — e entendê-los é fundamental para construir qualquer app React Native corretamente, entender props e state é conhecimento React Native essencial e fundamental — conceitos principais que todo desenvolvedor React Native deve entender, idênticos ao React web (então o conhecimento é transferível), e fundamental para construir componentes que recebem dados e respondem a mudanças, a mecânica básica do desenvolvimento de UI React Native.