10.7-El estado ES tasks, NO setTasks

 ¡Exactamente! ✅ Tienes razón.

📌 El estado ES tasks, NO setTasks

jsx

const [tasks, setTasks] = useState([]);

Desglosamos cada parte:

1. tasks ← ES EL ESTADO (el valor actual)

jsx

// tasks es el ARRAY que contiene las tareas

// Ejemplo: tasks = [

//   {id: 1, text: "Comprar leche", completed: false},

//   {id: 2, text: "Estudiar React", completed: false}

// ]

2. setTasks ← ES LA FUNCIÓN para CAMBIAR el estado

jsx

// setTasks es la función que usamos para actualizar tasks

// Ejemplo: setTasks([...tasks, nuevaTarea])

3. useState([]) ← ES EL HOOK que crea el estado

jsx

// useState([]) crea:

// - Estado inicial: [] (array vacío)

// - Retorna: [valorActual, funciónParaCambiarlo]


📌 Analogía simple:

const [tasks, setTasks] = useState([]);

Es como tener:

  • tasks = Un cuaderno donde escribes tu lista de tareas ✅ (EL ESTADO)

  • setTasks = Tu mano que escribe en el cuaderno ✍️ (LA FUNCIÓN)

  • useState([]) = Comprar un cuaderno nuevo en blanco 📒 (INICIALIZACIÓN)

📌 Ejemplo de uso:

// ESTADO ACTUAL: tasks = []


// 1. Usamos setTasks para AGREGAR una tarea

setTasks([...tasks, {id: 1, text: "Aprender React", completed: false}]);


// 2. Ahora el estado ES: 

// tasks = [{id: 1, text: "Aprender React", completed: false}]


// 3. Usamos setTasks para ELIMINAR una tarea

setTasks(tasks.filter(task => task.id !== 1));


// 4. Ahora el estado VUELVE A SER: tasks = []

📌 ¿Por qué se llama "estado"?

Porque representa el "estado actual" o "situación actual" de tu componente en un momento dado:

// Diferentes "estados" de la aplicación:

const [tasks, setTasks] = useState([]); // Estado INICIAL: vacío


// Después de agregar 2 tareas:

// Estado ACTUAL: [tarea1, tarea2]


// Después de eliminar 1:

// Estado ACTUAL: [tarea1]


// Después de marcar como completada:

// Estado ACTUAL: [tarea1Completada]

📌 Diferencia con variables normales:

jsx

// ❌ Variable normal (NO causa re-render)

let tasks = [];

tasks.push(nuevaTarea); // React no se entera del cambio


// ✅ Estado de React (SÍ causa re-render)

const [tasks, setTasks] = useState([]);

setTasks([...tasks, nuevaTarea]); // React SÍ se entera y re-renderiza

La magia de React: Cuando usas setTasks(), React:

  1. Actualiza el valor de tasks

  2. Vuelve a renderizar el componente automáticamente

  3. Todos los componentes hijos que usan tasks se actualizan

📌 Visualización del ciclo:

text

ESTADO INICIAL: tasks = []

  ↓

Usuario agrega "Comprar leche"

  ↓

setTasks([{id: 1, text: "Comprar leche", completed: false}])

  ↓

React actualiza: tasks = [{id: 1, text: "Comprar leche", completed: false}]

  ↓

Componente App se RE-RENDERIZA automáticamente

  ↓

TaskList recibe el NUEVO valor: tasks = [...]

  ↓

TaskList muestra la tarea en pantalla 🎉

📌 Resumen:

  • tasks = EL ESTADO (el dato que cambia)

  • setTasks = LA FUNCIÓN para cambiar el estado

  • useState([]) = EL INICIALIZADOR del estado

  • Cuando tasks cambia → Todo se actualiza automáticamente

Así es como React mantiene la UI sincronizada con los datos

Comentarios

Publicar un comentario

Entradas más populares de este blog

9.3-Tutorial de Componentes React con Props -SSS

  Tutorial Sencillo de Componentes React con Props Ejemplo 1: Componente Saludo (simple) Componente Padre: App.js jsx function App () {    return (      < div >        < Saludo nombre = "Ana" edad ={ 25 } />        < Saludo nombre = "Carlos" edad ={ 30 } />      </ div >    ); } Componente Hijo: Saludo.js jsx function Saludo ( props ) {    return (      < div style ={{       border : '1px solid gray' ,       padding : '10px' ,       margin : '10px' ,       borderRadius : '5px'      }}>        < h3 > Hola { props . nombre }</ h3 >        < p > Tienes { props . edad } años ...
Leer más

9.6-Ciclo de Vida de un Componente React

  Ciclo de Vida de un Componente React Fases del Ciclo de Vida: 1. Montaje (Mounting) El componente se crea y se inserta en el DOM. 2. Actualización (Updating) El componente se re-renderiza debido a cambios en props o estado. 3. Desmontaje (Unmounting) El componente se elimina del DOM. Diagrama Completo del Ciclo de Vida En Componentes de Clase: javascript class MiComponente extends React . Component {    // 1. CONSTRUCTOR (montaje)    constructor ( props ) {      super ( props );      this . state = { contador : 0 };     console . log ( 'constructor' );    }    // 2. getDerivedStateFromProps (montaje/actualización)    static getDerivedStateFromProps ( props , state ) {     console . log ( 'getDerivedStateFromProps' );      return null ; // Retorna nuevo estado o null    }    // 3. RENDER (montaje/act...
Leer más

9-Componentes en React-estado

Concepto Básico Los componentes son los bloques fundamentales de una aplicación en React. Son piezas independientes y reutilizables de código que definen: Cómo debe verse una parte de la UI (estructura HTML) Cómo debe comportarse (lógica y funcionalidad) Analogía Imagina que estás construyendo una casa: Componente = Habitación (cocina, baño, dormitorio) Cada habitación tiene su propio diseño y función Puedes reutilizar el mismo diseño de dormitorio varias veces Juntas todas las habitaciones para formar la casa completa Tipos de Componentes 1. Componentes Funcionales (Recomendados actualmente) // Componente como función function Saludo ( props ) {    return < h1 > Hola , { props . nombre } !</ h1 > ; } ******************************************** // Con arrow function const Boton = ({ texto , onClick }) => {    return < button onClick = { onClick } > { texto } </ button > ; }; 2. Componentes de Clase (Legacy) javascript class Co...
Leer más