DEV Community

Cover image for 📚 My Experience as a New React Developer: Why I Now Build First, Optimize Later
davinceleecode
davinceleecode

Posted on

📚 My Experience as a New React Developer: Why I Now Build First, Optimize Later

#webdev #beginners #react #learning

When I first started learning React, I was excited to apply all the best practices I read about — separation of concerns, custom hooks, services, modular components, you name it.

But once I tried to apply these concepts immediately during development, I found myself confused and stuck.

stuck

Instead of making faster progress, I spent too much time thinking:

  • "Should I put this logic in a service?"
  • "Should I extract this into a custom hook?"
  • "Should I already split this component?"

The truth is: I was optimizing too early.

💡 What I Learned: Build First, Then Refactor

After reading more advice from experienced developers, I realized that the better approach — especially for beginners or solo developers — is simple:

Get it working first. Refactor for clarity second.

Here's the workflow I now follow:

Phase What I Do
1. Build Fast (Inline Everything) Focus on making it work. Don't worry about perfect structure yet.
2. Refactor (Separation of Concerns) Once it works, split into services, components, and hooks if needed.
3. Add Type Safety & Error Handling Use TypeScript interfaces and proper error/loading handling.
4. Polish the Code Organize folders, improve naming, and clean up unused code.

🛠 Real Example

When I started, I would already think:

  • Should I create a UserService?
  • Should I create a useUsers hook?

Now, I just do something like:

useEffect(() => {
  axios.get('/api/users').then(res => setUsers(res.data));
}, []);
Enter fullscreen mode Exit fullscreen mode

Once it's working, then I refactor into cleaner code like:

// useUsers.ts
const useUsers = () => {
  const [users, setUsers] = useState<User[]>([]);
  // Fetch logic here
  return { users };
};

// App.tsx
const { users } = useUsers();
Enter fullscreen mode Exit fullscreen mode

Much easier!

📦 Why This Works

  • 🧠 You avoid premature complexity that slows you down.
  • 🔥 You see fast results, which keeps you motivated.
  • 🎯 You only optimize what’s proven to be needed (DRY - Don't Repeat Yourself).

✨ Final Thoughts

If you're also new to React (or even programming in general), here’s my advice:

Don’t force clean code during the first build. Make it work first. Then make it beautiful.

It’s okay to start messy. What matters is you learn, improve, and move forward.

Happy coding! 🚀

If you found this helpful, consider supporting my work at ☕ Buy Me a Coffee.

Top comments (0)

OSZAR »