One of those sessions where you're not learning anything wildly new — but things start connecting in a way they didn't before. Here's what clicked today.
The default Keyword in Imports Actually Matters
This one seems small but it quietly breaks things when you get it wrong.
When you export something as default, you can import it with any name you want — no curly braces needed:
export default Card;
import Card from './Card';
But the moment there's no default, you're doing a named export — and now you must use {} with the exact same name:
export { Card };
import { Card } from './Card';
Mix these two up and you'll spend 10 minutes staring at an undefined component wondering what went wrong. Trust me.
Rendering a List Across Multiple Components
Instead of dumping everything into one component, you can split your list items into their own component and just map over your data to render each one. Cleaner, more reusable, and way easier to manage as things grow.
Spread ... Is Almost Always the Better Move
When passing data to a component, you could write every prop out one by one. Or you could just spread the whole object:
<Card {...cardData} />
Less repetition, same result. Once you start doing this it's hard to go back.
{} for Any JavaScript Inside return
Simple rule — the moment you're writing JavaScript inside your JSX return, wrap it in {}. Expressions, variables, function calls, ternaries — all of it. JSX won't understand it otherwise.
return (
<div>
<h1>{title}</h1>
<p>{isLoggedIn ? "Welcome back!" : "Please sign in"}</p>
</div>
);
Always Give a key When Rendering Lists
React uses key to track which item is which in a list. Without it, React gets confused when items update, reorder, or get removed — and you'll see weird rendering bugs that are a nightmare to debug.
items.map((item) => <Card key={item.id} {...item} />);
Use something unique and stable like an id. Don't use the array index — it causes more problems than it solves.
Parameter Destructuring Keeps Things Clean
Instead of passing the whole props object around and doing props.name, props.age everywhere — just destructure right in the function signature:
function Something({ name, age, address }) {
...
}
Cleaner to read, cleaner to write. You immediately know exactly what this component expects just by looking at the top line.
Top comments (0)