¿Cómo funcionan las props y el state en React Native?

Question

Accepted Answer

**Props** y **state** son conceptos centrales de React que funcionan de manera idéntica en React Native: **props** pasan datos hacia un componente (entradas de solo lectura), mientras que **state** contiene datos que pueden cambiar con el tiempo (provocando re-renderizados). Entenderlos es fundamental. ## Props — datos pasados (solo lectura) ```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 — datos que cambian (mediante 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 es datos internos y modificables; actualizarlos (mediante el setter de `useState`) desencadena un re-renderizado — cómo la interfaz de usuario refleja los cambios. ## 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 qué es importante Entender props y state es fundamental en React Native porque son **conceptos centrales de React fundamentales para cómo funcionan los componentes y cómo se actualizan las interfaces de usuario**, por lo que es conocimiento obligatorio. **Props** (datos de solo lectura pasados a un componente desde su componente padre, fluyendo hacia abajo en el árbol de componentes) son cómo los componentes reciben configuración y datos desde el exterior, permitiendo componentes reutilizables y composables. **State** (datos internos modificables gestionados mediante el hook `useState`, donde actualizarlos desencadena un re-renderizado) es cómo los componentes mantienen y responden a datos que cambian con el tiempo (entrada del usuario, interruptores, datos obtenidos) — el mecanismo por el cual las interfaces de usuario reflejan cambios. Entender la **distinción** — props pasadas y de solo lectura (para datos/configuración externos) versus state siendo interno y modificable (para datos que cambian, impulsando re-renderizados) — y el principio de que **los datos fluyen hacia abajo mediante props mientras que los cambios de state impulsan actualizaciones de la interfaz de usuario** es fundamental para construir aplicaciones React Native (y React) correctamente. Estos son exactamente los mismos conceptos que React para web, por lo que entenderlos se transfiere directamente y es esencial para cualquiera que construya componentes React Native. Hacer props y state correctamente (pasar datos mediante props, gestionar datos que cambian con state, entender el flujo de datos unidireccional) es fundamental para componentes funcionales y correctos. Ya que props y state son fundamentales para cómo funcionan los componentes React Native (y React) — recibiendo datos (props) y gestionando cambios (state) para impulsar actualizaciones de la interfaz de usuario — y entenderlos es fundamental para construir cualquier aplicación React Native correctamente, entender props y state es conocimiento esencial y foundacional de React Native — conceptos centrales que todo desarrollador de React Native debe entender, idéntico a React web (por lo que el conocimiento se transfiere), y fundamental para construir componentes que reciben datos y responden a cambios, la mecánica básica del desarrollo de interfaces de usuario en React Native.