My first React project crashed because I mixed up state and props for 3 days straight

I started learning React about 4 months ago and I kept seeing people online say state and props are totally different things. But nobody explained why it actually matters until I built a little to-do app in my bedroom last Tuesday. I put the array of tasks in a prop instead of state and when I tried to add a new item the whole list just sat there frozen. It took me 3 days of reading error messages and watching YouTube at 2am to figure out I was updating the wrong thing. Why do beginners keep skipping the basics of state vs props and jumping straight into hooks? Has anyone else hit this same wall and found a clear way to teach the difference?

2 comments

2 Comments

kellygarcia1mo ago

Wait you spent 3 days on a todo app because of that? nah that's rough lmao. I feel your pain though, I did the exact same thing with a counter app when I first started. I had this whole state variable that was supposed to hold the count but I kept tossing it into a prop of a child component and wondering why it wouldn't update. Ended up just hardcoding the number to "5" for like a week before I realized I was literally passing the wrong thing down. The basics trip everyone up because tutorials just say "state is local, props are passed" but never show you what it looks like when you mess that up in real time. Once I saw that frozen list or that stuck counter it clicked instantly cause you can see the thing not working right there.

barbara_kim1mo ago

Oh man, I did something similar with a weather app once. I spent two whole days trying to pass the temperature value down four levels deep and forgot to update it in the middle component. Ended up with a static "72 degrees" for like a week because I just gave up and hardcoded it while I figured out what I broke. The worst part was I had three different console logs all showing the right number, so I knew the data existed, I just couldn't get it to travel through the props properly. Not my finest moment, but at least I finally learned to check each component one at a time instead of guessing.