What building a Reactigotchi can teach you about an applications “memory”

Sign in<br>Subscribe

Remember Tamagotchis? Those tiny digital pets from the 90s that taught an entire generation about responsibility (and the consequences of neglect)? Well they’re back, and not just in the Tamagotchi Paradise I keep on my desk. I decided to recreate that nostalgia in React, building a nerdy alien virtual pet complete with pixel art, stat management, and a mini-game.<br>Better yet, I did this in Replit for making me look good), and realized it could be a great beginner project for those new to Replit, React, vibe coding or even“state” as a concept. (Admittedly, that last one used to throw me through a loop).<br>If you're brand new to React or the concept of state, this post will walk you through the core concepts used to build this app—and explain them in plain English.<br>If you’ve ever stared at useState() like it’s a cryptic incantation, this post is for you. Let’s break down what’s actually happening—using hungry aliens instead of todo lists.<br>Pssst — want to just skip to kicking me off of my own high-score board? Play with the Reactigotchi on Replit, or explore the code on GitHub.<br>ℹ️<br>For the sake of this blog post and example, we’ll be covering how state is implemented in React — however, the basic concept of state is consistent across languages.

What even is "state"?<br>Before diving into the code, let's talk about state. If you're new to programming, state might sound like technical gobbledy-gook, but it's actually something you may encounter nearly every time you surf the web.<br>State is a concept that you’ll encounter in nearly every programming language, and almost every programming language handles it a little bit differently.<br>Put simply, state is your app's memory.<br>It’s a snapshot in time of all relevant variables and data structures during your application’s execution.<br>Think of state like a notebook where your app writes down important information it needs to remember. In my Reactigotchi, the app needs to remember:<br>How hungry is the alien? (a number from 0-100)<br>How happy is it? (another number)<br>How clean is it? (yet another number)<br>Is it currently jumping? (yes or no)<br>Is the mini-game showing? (yes or no)<br>Every time one of these numbers or yes/no values changes, React automatically redraws the screen to show the new information. That redrawing is called a re-render .<br>Here's the beautiful part: you don't manually tell React, "hey, redraw the hunger bar now." You just change the number, and React handles the rest. (tada 🪄)<br>useState: React's memory system<br>React gives us a tool called `useState` to create the snapshot that is state. Here's how it’s set up in the Reactigotchi's memory:<br>const [hunger, setHunger] = useState(80);<br>const [happiness, setHappiness] = useState(80);<br>const [cleanliness, setCleanliness] = useState(80);<br>const [isJumping, setIsJumping] = useState(false);<br>const [showMiniGame, setShowMiniGame] = useState(false);Let's break down what this code means.<br>useState(80) says: "React, please remember a number for me. Start it at 80."<br>React gives you back two things in a box (that's what the [hunger, setHunger] part means):<br>hunger - the current value (starts at 80)<br>setHunger - a function to change that value<br>Think of it like this: hunger is a piece of paper with a number written on it in pencil, and setHunger is a pencil with an eraser that lets you change what's written.<br>When you call setHunger(50), two things happen:<br>React updates the number to 50<br>React automatically re-renders any part of the screen that shows the hunger value<br>Making stats change: Event Handlers<br>Now that we have state, how do we change it? Through event handlers —functions that run when something happens (like clicking a button).<br>Here's the "Feed" button handler in the Reactigotchi application:<br>const handleFeed = () => {<br>setHunger(Math.min(MAX_STAT, hunger + 25));<br>setHappiness(Math.min(MAX_STAT, happiness + 5));<br>};When you click "Feed," this function runs and:<br>Increases hunger by 25 (but not above 100, thanks to Math.min)<br>Also increases happiness by 5 (because eating makes the alien happy!)<br>The Math.min(MAX_STAT, hunger + 25) part is a safety check.<br>It says: "Take whichever is smaller: 100 or the new hunger value." This prevents hunger from going above 100.<br>Here's another handler for cleaning:<br>const handleClean = () => {<br>setCleanliness(MAX_STAT);<br>setHasPoop(false);<br>setHappiness(Math.min(MAX_STAT, happiness + 10));<br>};See how one action (cleaning) changes multiple pieces of state? Cleanliness goes to 100, poop disappears, and happiness gets a boost. These interconnections make the pet feel alive.<br>Automatic changes: useEffect and stat decay<br>The trickiest part of a Tamagotchi is that stats decay automatically over time. The alien gets hungrier, sadder, and dirtier — even when you're not clicking anything.<br>This is where useEffect comes in. It lets you run code on a schedule.<br>useEffect(() => {<br>const decayInterval = setInterval(() =>...