📌 Missed Day 9? I explored how React Hook Form handles validation, why the errors object exists, and how register() and handleSubmit() work together to prevent invalid form submissions. You can **read it here* and then come back. I'll wait. ☕️*
Yesterday, I finally built a form that could collect user information.
It worked.
I could enter a name, email, mobile number, and image URL.
Click Add User...
The new user appeared on the screen.
Everything looked perfect.
Until I refreshed the page.
Every single user disappeared.
😐
That's when I realized something.
React wasn't losing my data...
It was doing exactly what I asked it to do.
The problem was that I was only storing everything in state.
Today, I learned how to make my application actually remember data—even after refreshing the browser.
And by the end of the class, my simple form had turned into my first CRUD application. 🚀
🧠 Quick Recap
Yesterday's big question was:
How can I make forms smarter with validation?
Here's what I learned on Day 9:
- ✅ React Hook Form simplifies form handling.
- ⚠️ Validation rules prevent invalid input.
- 📩
errorsstores validation messages. - 📝
register()connects inputs to React Hook Form. - 🚀
handleSubmit()only runs when validation passes.
Today, we're answering a different question:
How can my application actually remember user data? 🤔
💾 The Problem With React State
At first, I stored my users like this:
const [users, setUsers] = useState([]);
Whenever I submitted the form, a new user appeared instantly.
Everything seemed fine.
Until I pressed refresh.
Add User
↓
User Appears
↓
Refresh Browser
↓
Everything Disappears 😶
That wasn't React making a mistake.
It was simply because React state only lives while the application is running.
Refreshing the page starts everything from scratch.
📦 Enter Local Storage
That's where I discovered Local Storage.
Unlike React state, Local Storage is built into the browser.
It stores data even after refreshing the page.
Instead of starting with an empty array, I initialized my state like this:
const [users, setUsers] = useState(
JSON.parse(localStorage.getItem("users")) || []
);
At first, that line looked intimidating.
But after breaking it down, it made perfect sense.
🧩 Breaking It Down
First:
localStorage.getItem("users")
tries to read previously saved users.
But Local Storage stores everything as strings.
That's why React can't use it directly.
So I used:
JSON.parse(...)
to convert the string back into an array of objects.
Finally:
|| []
acts as a fallback.
If no users exist yet, React simply starts with an empty array.
💾 Saving Users
Loading data is only half of the story.
Whenever I created a new user, I also needed to save it.
localStorage.setItem(
"users",
JSON.stringify(arr)
);
This line does the opposite.
JavaScript Object
↓
JSON.stringify()
↓
String
↓
Saved in Local Storage
Now, even after refreshing the page...
My users were still there.
That was a really satisfying moment.
🆔 Every User Needs a Unique Identity
While building the CRUD application, I ran into another small but important problem.
Every user needed a way to be uniquely identified.
Without a unique ID, React wouldn't know exactly which user I wanted to update or delete.
There are several ways to generate unique IDs. Some common options are:
- Using a database-generated ID
- JavaScript's built-in
crypto.randomUUID() - The popular
uuidpackage - The lightweight nanoid package
For this project, I used nanoid because it's simple, lightweight, and generates unique IDs with very little setup.
📦 Installing Nano ID
npm install nanoid
After installing it, I imported it into my component:
import { nanoid } from "nanoid";
Whenever I created a new user, I generated a unique ID like this:
const newUser = {
...data,
id: nanoid(),
};
Now every user has its own unique identifier.
That ID becomes incredibly useful later.
When I click Update or Delete, React can easily find the correct user by comparing IDs instead of relying on things like the user's name or their position in the array.
It might seem like a tiny detail, but adding unique IDs makes managing collections of data much more reliable—especially as applications grow larger.
❌ Deleting Users
The next feature I added was deleting users.
The logic turned out to be surprisingly clean.
const filteredUsers = users.filter(
(user) => user.id !== id
);
The flow looks like this:
Click Delete
↓
Remove Matching User
↓
Update State
↓
Update Local Storage
↓
UI Updates ✨
One click...
And the selected card disappeared.
✏️ Reusing the Same Form for Updates
This was probably the coolest part of today's project.
My first thought was:
"Updating a user probably needs another form."
It turns out...
It didn't.
I reused the exact same form for both creating and updating users.
That felt much cleaner than building two separate forms.
📋 Filling the Form Automatically
When I clicked Update, I passed the selected user's data into the form.
defaultValues: updatedData
That tiny line made React Hook Form automatically fill every input.
Instead of seeing empty fields...
I immediately saw the existing user's information.
It felt like the form already knew what I wanted to edit.
🔄 Updating Only One User
Saving the updated data was another interesting part.
Instead of replacing the whole array, I only replaced the matching user.
setUsers((prev) =>
prev.map((user) =>
user.id === updatedData.id
? { ...data }
: user
)
);
Here's how I visualize it:
Users Array
↓
Loop Through Every User
↓
Matching ID?
↓
YES ✅ Replace It
NO ❌ Keep It
Only one object changes.
Everything else stays exactly the same.
That made map() feel much more practical than when I first learned it.
🧠 My Mental Model
Today's project finally connected a lot of concepts I'd learned over the past few days.
Fill Form
↓
React Hook Form Validates
↓
User Added
↓
Save in State
↓
Save in Local Storage
↓
Render User Cards
↓
Update or Delete User
↓
UI Updates Automatically ✨
Seeing everything work together made the project feel much more like a real application instead of isolated React examples.
💡 My Biggest Takeaways Today
- 💾 React state disappears after a refresh, but Local Storage doesn't.
- 📦
JSON.parse()converts stored strings back into JavaScript objects. - 📝
JSON.stringify()prepares objects before saving them. - 🆔
nanoid()makes it easy to generate unique IDs. - ✏️ The same form can be reused for both creating and updating users.
- 🔄
map()makes updating a single object inside an array surprisingly clean.
📚 Learning Source
I'm currently learning React through the React Cohort 3.0 by Devendra Dhote at Sheriyans Coding School.
This article is based on my own class notes, code experiments, and understanding after today's session. Writing these posts helps me reinforce what I've learned, and hopefully helps other beginners following a similar path.
If I've misunderstood anything, I'd genuinely appreciate corrections in the comments. 😊
🙌 Final Thoughts
Today's project felt different from the previous ones.
Instead of learning a single React concept, I finally saw several concepts working together.
State stored the data.
React Hook Form handled user input.
Local Storage made the data survive page refreshes.
map() updated individual users.
filter() removed them.
For the first time, it felt like I wasn't just writing React code—I was building something that behaved like a real application.
Tomorrow's topic is Context API, and I'm curious to see how React lets components share data without passing props through every level.
See you on Day 11! 🚀
💬 When you built your first CRUD application, what feature felt the most satisfying to implement—Create, Update, Delete, or saving data with Local Storage?
I'd love to hear your experience in the comments. 😊
If you're following along with this series, you can also find me on GitHub, where I'll be sharing my projects and documenting my progress.
Bismay-exe (Bismay.exe) · GitHub
👋 Hi, I’m Bismay 💻 Developer passionate about building clean, minimal, and elegant apps 🚀 Focused on coding 🌱 Always learning, creating & new ideas - Bismay-exe
github.com
🤖 AI Disclosure: This article is based on my own React learning journey, class notes, code experiments, and understanding. I used ChatGPT to help improve the writing, structure, and readability of this post. I reviewed and verified the technical explanations before publishing, and I take responsibility for everything shared here.
Thanks for reading! 🚀
Top comments (0)