Things I Explored in React Today (And Some JS That Finally Clicked)

Today was one of those sessions where small things started making actual sense. Here's what I explored.

Arrow Functions Don't Eat Extra Memory
I had this assumption that storing an arrow function in a new variable costs extra memory. Turns out the variable is just a reference — there's no duplicate logic sitting in memory. Small thing, but it was bugging me for a while.

---

A Component Can Be Called Like a Regular Function
You know you can write <Header /> in JSX — but {Header()} works too. The reason is simple: anything inside {} in React is just plain JavaScript, and a component is just a function. You won't use this style often, but knowing why it works makes JSX feel less magical.

---

Use Parentheses When Wrapping JSX Output
When your return spans multiple lines, wrap it in () not {}. Parentheses just group your output cleanly — curly braces mean something else in JS entirely. This one tiny habit saves a lot of weird silent bugs.

---

Props — Two Different Moments
There's defining and there's passing — and they look different on purpose.
When creating the component:
function Card({ title, description }) { }
When using the component:
<Card title="Hello" description="World" />
Keeping these two moments separate in your head makes props click much faster.

---

Arrays + Spread = Clean Data Passing
Instead of hardcoding each card manually, store your data in an array of objects and let .map() + spread do the work:
const cards = [
{ title: "Card 1", description: "Learns fast" },
{ title: "Card 2", description: "Ships faster" },
];

cards.map((card) => <Card key={card.title} {...card} />);
The {...card} just unpacks every property as an individual prop. Clean and scales effortlessly.

---

filter() and map() Chain Beautifully
These two are made for each other. Filter what you need, then map over the result:
items.filter(item => item.active).map(item => <Card {...item} />);
Once this pattern clicks, you'll use it everywhere.

---

Nullish Coalescing ??
const name = user.name ?? "Anonymous";
Returns the right side only when the left is null or undefined. Unlike ||, it won't wrongly skip over 0 or "" — which are falsy but sometimes totally valid values.

---

Optional Chaining ?.
const lastName = obj?.name?.lastName;
Instead of crashing when something in the chain is undefined, it just quietly returns undefined. No more nested if checks just to safely read a deep property.