DEV Community

Cover image for Week 14 – Custom Hooks, Finishing usePopcorn, and Learning How to Design Code
Usama
Usama

Posted on

Week 14 – Custom Hooks, Finishing usePopcorn, and Learning How to Design Code

This week felt… different.

Not because I learned a lot of brand-new concepts.
But because I solidified how to think about React code architecture.

This week was not about quantity of concepts.

It was about quality of structure.


usePopcorn Is Finally Done ✅ (A 3-Week Journey)

First, the big milestone:

The usePopcorn app is finally complete.

This was not just a one-week project.
This app was built and refined over the last 3 weeks.

This week was just about:

  • Final polish
  • Cleanup
  • Refactoring
  • And structuring the code better using custom hooks

Live App:
🔗 Live Demo

GitHub:
🔗 Readme File Link

When I look back at this app, I don’t just see a movie app.

I see how much my React thinking has improved.


Week 14 Topic: Custom Hooks

This week’s main topic was:

Custom Hooks

And honestly?

It’s not a “new feature”. It’s a new way of thinking.

Custom hooks are about:

  • Separating logic from UI
  • Cleaning up components
  • Making code reusable
  • Designing your own abstractions

The Challenge: Building useGeolocation

This week’s challenge was to build a custom hook for geolocation.

The hook handles:

  • Loading state
  • Errors
  • Position
  • Click count
  • And the actual browser API call

The component doesn’t care how it works.

It just says:

“Give me position, loading, error, and a function.”

This was a great exercise in thinking:

“What should a hook expose, and what should it hide?”


Important Realization This Week

This week I didn’t learn many new concepts.

But I learned something more valuable:

How to organize what I already know.

That’s a big difference.


usePopcorn + Custom Hooks = Clean Architecture

In usePopcorn, I now have hooks like:

  • useMovies
  • useLocalStorage
  • useKey

So instead of writing:

  • useEffect
  • fetch
  • AbortController
  • event listeners
  • localStorage logic

…inside components…

I just use my own hooks.

My components are now mostly UI.
My hooks are where the brain lives.


This Week Was Not Flashy — But It Was Important

Not every week is about:

  • Big new APIs
  • Big new features
  • Big new magic

Some weeks are about:

Refinement. Structure. Maturity.

And this was one of those weeks.


Final Thoughts

Week 14 taught me something subtle but powerful:

Clean React code is not about writing more code.
It’s about designing better boundaries.

usePopcorn is done.
Custom hooks are in my toolbox.
And my code is starting to look like engineering, not just experimenting.

Still learning. Still improving. Still moving forward. 💪

Top comments (0)