The React Trifecta: Hooks, Props and Components

When I first met React, I thought:
“Oh wow, I bet this looks… clean.”
Then it handed me JSX, and I was like:
“Wait… is this HTML in my JavaScript or JavaScript in my HTML? What sorcery is this?”

And so began my journey into the magical, mildly chaotic world of React — a library that promises reactivity but comes with a fair bit of emotional damage if you're not ready.

But amidst the madness, I met the three pillars — the Big Dogs — that rule the React Kingdom:

1. Components – The React Royalty

Components are the DNA of every React app.
They’re like jenga pieces — reusable, stackable, occasionally painful when they come crashing down.

There are two kinds:

• Functional components (the modern cool kids; fast and flashy)
• Class components (the boomers React is slowly retiring with dignity)

Components let you split the UI into independent, self-contained pieces. Think of them like the Nigerian sandwich: agege bread becomes sliced, akara slid in between— heaven!

You build them, reuse them, and if you're really fancy, nest them deeper than your emotional trauma.
React doesn’t judge. Nest away.

2. Props – The Couriers of Truth

Next, I met Props — short for properties, but I call them "React amebo (gossip)".

Why? Because props are how one component tells another:
“Hey, here's everything you need to know. Don’t mess it up.”

Props are read-only, like the typical Nigerian mother who lectures you about life but won’t let you respond.

You pass them down from parent to child, which is super wholesome… until you’re 12 components deep and still passing the same prop like a relay baton from Mount Doom. That’s when you learn about context, but we’ll save that for the next therapy session.

Still, props are vital. Without them, your components are just pretty faces with no personality.
With them, they talk, interact, and become a full-blown React house of commotion.

3. Hooks – The Dark Arts of Functionality

And then came the one that changed my life: Hooks.

Hooks are like React’s secret spellbook. They let functional components do what only class components could do back in the day — things like managing state, side effects, refs, and existential crises.

The big ones:

• useState: for toggling between light/dark mode… or stable/losing your mind.
• useEffect: for running side effects — i.e., everything you were doing wrong before you learned this hook.
• useRef, useContext, useReducer… each with their own drama.

But here's the deal:
Hooks hook you. One minute you're writing a simple state update. The next, you're neck-deep in a custom hook that controls API calls, scroll behavior, and the emotional well-being of your users.

Once you go hooks, you don’t go back.
Unless you're debugging — in which case, you absolutely go back and cry.

Final Thoughts: The Trinity That Builds React Apps

React isn’t just a tool. It’s a lifestyle.
It teaches you component-based architecture, prop-drilling etiquette, and how to manage your emotional state with useState.

It humbles you with bugs like:

• “Maximum update depth exceeded”
• “Too many re-renders”
• And the classic: “Cannot read property ‘something’ of undefined”

But once you get it… oh man, it’s beautiful.
You start thinking in components.
You build like a UI poet.
You refactor with the confidence of a thousand console.logs.

So if you’re new to React, or if you’re still stuck in a toxic relationship with class components — take a breath.
Learn the Big Three: Components, Props, and Hooks.
Master them. Unhook them. Respect them. Laugh through the bugs.

Because once you do, React becomes more than a library.
It becomes your superpower.