Hey folks! Today was one of those sessions where the lightbulb 💡 really went off — I finally understood some confusing but fundamental stuff in React and JavaScript. Here's a breakdown of what I learned (and trust me, it's gold 👑 for beginners and even intermediates who missed the tiny details):
⚛️ 1. Why JSX Needs Double Curly Braces for Styling
"Wait, I'm passing a JavaScript object, so why can't I just wrap it directly with {} like that?"
<button {style={backgroundColor: "red"}}>Red</button> ❌
But now I know:
Because JSX doesn't allow curly braces around attributes like that. In JSX, attributes must be in the format:
attributeName={jsValue}
<button style={{ backgroundColor: "red" }}>Red</button>
So in incorrect example:
<button {style={...}}> ... </button>
You're trying to put JavaScript inside the HTML tag syntax itself, which breaks JSX rules.
JSX expects props (like style) to be written as:
<tagName propName={jsExpression} />
In our case:
<button style={ { backgroundColor: "red" } }>Red</button>
This is valid because:
- style is the prop name
- { ... } is the JSX way of saying “the value of this prop is a JavaScript expression”
- And that expression happens to be an object 🔁
🔁 2. Does the Whole Component Re-render on State Change?
I asked:
When I click a button and change color using
setColor("pink"), does the whole component re-render? Does React repaint everything?
✅ Answer: Yes, the function re-runs, but React is smart!
- The entire JSX is re-evaluated
- But React only updates the actual DOM parts that changed (thanks to Virtual DOM and diffing)
So your UI stays efficient and smooth 🧈✨
👀 3. Why Does console.log() Run Twice in React?
I dropped a console.log("let's see") inside JSX and freaked out when it printed twice 😅
💡 Reason:
React.StrictMode in development intentionally renders components twice (but ONLY in dev mode) to catch bugs.
✅ Production will render just once. No worries! All part of the dev experience.
🧠 4. JS Return Rule: Why Code After return is Ignored
I made this mistake:
return (
<>
<h1>Hi</h1>
</>
);
<App />; // ❌ doesn't work
Lesson learned:
➡️ After return, nothing else inside the function runs.
So if you want to return <App />, include it inside the return (...) block.
📦 5. Do I Have to Use the Same Prop Name?
I was passing state like this:
<App count={count} />
And I wondered: Do I have to call it count in the child?
✅ Nope!
You can rename it however you want when passing:
<App totalClicks={count} />
Just make sure the name matches in the child:
function App({ totalClicks }) {
return <h2>{totalClicks}</h2>;
}
🔄 Arrays/Objects confusion – Built-in or User-Defined?
Absolute 🔥 of a question:
“Why do we call arrays/objects user-defined if we didn’t define how they work?”
Here’s the truth:
Object and Array types are built-in to JavaScript ✅
But when you create a structure with them, like:
const person = { name: "Aman", age: 22 };
const colors = ["red", "green"];
That structure is user-defined — you decide the keys, values, and layout. You didn’t create the engine, but you decided what’s inside it.
🧠 Built-in container, user-defined content.
Primitive types
These are the basic building blocks — they are predefined and immutable (can't be changed directly).
String
Number
Boolean
These are called primitive because:
They hold single values.
They are not objects.
They are copied by value.
So yes, they are predefined by the language.
💡 TL;DR:
| Type | Predefined | User-defined | Stored As |
|---|---|---|---|
| Primitive | ✅ Yes | ❌ No | By value |
| Non-primitive | ✅ (base) + ✅ you define shape | ✅ Yes | By reference |
🧩 Topics I Crushed Today:
- JSX attribute syntax
- React re-render logic ⚛️
- StrictMode behavior 👀
- JavaScript return rules 🧠
- Prop naming and passing 📨
If you're learning React — bookmark this, share it, and remember:
Even your "smallest doubts" are super valid — clear them early and loud! 🙌
Let me know if you want this as a tweet thread, blog intro, or carousel — we can style it however you like! 🎨
Top comments (1)
Again, great stuff! Keep it up!