Today felt different.
Not because I learned a new React feature, but because I leveled up how I think about code structure.
Today, I didn’t just write components.
I started building my own hooks.
And that changed everything.
The Moment I Realized My Components Were Getting Messy
While working on my project, I noticed a pattern:
- Keyboard logic in one component
- LocalStorage logic in another
- Movie fetching logic somewhere else
- Lots of
useEffect, lots of repeated patterns
Everything worked…
But everything was tightly coupled to components.
That’s when I realized:
This logic doesn’t belong to the UI.
This logic deserves its own abstraction.
That’s when I truly understood Custom Hooks.
Custom Hooks Are Not a Feature. They Are a Design Tool.
Before today, I thought:
“Custom hooks are just a nice-to-have.”
Today I understand:
Custom hooks are how you separate behavior from UI.
They let you:
- Reuse logic
- Isolate side effects
- Simplify components
- Think in features instead of files
Hook 1: useKey — Encapsulating Keyboard Behavior
I built a hook that:
- Listens for a specific key
- Runs an action when that key is pressed
- Automatically cleans up after itself
The important idea:
The component should not care how the event listener works.
It should only say: “Run this when this key is pressed.”
Now my component reads like business logic, not plumbing.
Hook 2: useLocalStorage — State That Persists Automatically
This hook taught me something powerful:
A hook can feel like state, but be smarter than state.
This hook:
- Reads initial value from
localStorage - Keeps React state in sync
- Automatically saves on every change
So now instead of writing storage logic everywhere, I just say:
“Give me persistent state.”
That’s a huge architectural upgrade.
Hook 3: useMovies — The Moment It All Clicked
This was the real turning point.
I moved:
- Fetching
- Loading state
- Error handling
- AbortController
- Data cleanup
- Business rules
…into one single hook.
Now my component doesn’t know:
- How fetching works
- How errors are handled
- How race conditions are prevented
It only knows:
“Give me movies, loading, and error.”
That’s clean separation of concerns.
The Real Power of Custom Hooks
Today I finally understood this:
Custom Hooks are how you build your own React API for your app.
Instead of writing:
useEffectuseStatefetchaddEventListenerlocalStorage
…again and again…
You write:
useMoviesuseKeyuseLocalStorage
And your app starts reading like a story.
The Shift in My Thinking
Before today:
“How do I implement this?”
Today:
“What hook should exist for this behavior?”
That’s a big mindset shift.
How I Think About Custom Hooks Now
- Components = UI only
- Hooks = behavior, side effects, logic
- If logic feels reusable → it deserves a hook
- If a component feels heavy → extract a hook
And Then I Started the Coding Challenge
Today wasn’t just about understanding.
It was about starting to build with this new mindset.
That’s when you know learning is becoming skill.
Final Thoughts
Today I didn’t just learn custom hooks.
I learned how to design my code.
My components are smaller.
My logic is cleaner.
My app is more maintainable.
And most importantly:
I’m no longer just using React.
I’m building on top of it.
Top comments (2)
Hi, there
😀 Hi