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 A Component Can Be Called Like a Regular Function

<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 Props — Two Different Moments function Card({ title, description }) { } <Card title="Hello" description="World" /> Arrays + Spread = Clean Data Passing const cards = [

cards.map((card) => <Card key={card.title} {...card} />); just unpacks every property as an individual prop. Clean and scales effortlessly. filter() and map() Chain Beautifully items.filter(item => item.active).map(item => <Card {...item} />); Nullish Coalescing ?? const name = user.name ?? "Anonymous"; 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.