Tengo una preguntita… ¿Cuándo se debería usar <code>useState</code> y cuándo se debería dejar el valor en una variable normal? Me parece ...

Esta lectura super profundiza en esa duda: https://kentcdodds.com/blog/dont-sync-state-derive-it

Muy buenas respuestas, btw :clap:

Excelente, gracias por aportar a esta valiosa comunidad

Chismeando en el foro de Platzi, y por si a alguno se le generó la misma duda (y no quiere buscar en Google, sino que prefiere una linda y clara respuesta), encontré que un estado creado con

Así las cosas, si solo se usaran variables, la vista podría quedar desactualizada, fuera de sincronización con la data real.

Por esa razón, se pueden combinar ambos… Un estado para la data que cambia constantemente, que genere los re-renders necesarios, y variables normales que hagan cálculos sobre esos estados... Así, al cambiar el estado y disparar el re-render, los cálculos también se actualizarán (para los que conocen Vue, algo muy similar a las propiedades

Nunca paren de aprender :hugs: (y de preguntar, aunque los manden a preguntar a Google).

Wow, muchas gracias @abi_sevilla, pero estando en Platzi, prefiero aprovechar el poder de la comunidad.

Gracias por la explicación, @willydaconceicao :hugs:

Tiene que ver mas con el renderizado del componente y si quieres que vuelva hacer render. Las variables son útiles cuando por ejemplo no tienes que actualizar su valor. También hay ocasiones donde se hace uso innecesario del estado allí es donde una variable lo hace mas simple. Mira un ejemplo con react.

import React, { useState, useContext } from "react"

const Cart = () => {
  const { cart } = useContext(CartContext)

  const total = cart.reduce(
    (prev, current) => prev + current.price * current.quantity,
    0
  )
  return <>{total}</>
}

export default Cart

import React, { useState, useEffect, useContext } from "react"

const Cart = () => {
 const { cart } = useContext(CartContext)
 const [total, setTotal] = useState(0)

  useEffect(() => {
    setTotal(cart.reduce(
      (prev, current) => prev + current.price * current.quantity,
      0
    ))
  }, [])

  return <>{total}</>
}

export default Cart

en google podrias buscar como "use of useState vs normal variable" o diferencia entre useState y nomal variable"