When I first jumped into React, I thought it was just "HTML inside JavaScript." I was wrong.
After banging my head against the keyboard for months, here are the 5 hard truths I wish someone had told me from day one.
- You Actually Need to Know JavaScript First (For Real) I thought I could learn React and ES6 at the same time. Big mistake.
React is not a separate language; it's 100% JavaScript with a twist. If you don't understand:
map(), filter(), reduce()
Destructuring (const { name } = props)
The spread operator (...array)
Async/await
...you will spend 80% of your time Googling basic JS errors instead of learning React.
Learn modern JS first. Your future self will thank you.
- State Updates Are Not Instant I remember writing setCount(count + 1) and then immediately logging count—only to see the old value. I thought React was broken.
Reality: State updates are asynchronous. React batches them for performance.
javascript
const handleClick = () => {
setCount(count + 1);
console.log(count); // Still the old value!
};
Use useEffect or the updater function form if you need the new value.
- Props Drilling Is a Trap Passing data from grandparent → parent → child → grandchild works... until it doesn't.
When you rename a prop in the middle component, everything breaks. You'll find yourself passing setUser through three levels just so a deep button can click it.
The fix: Learn Context API or Zustand/Redux early. Not for every app, but once you feel the pain of props drilling, you'll know when you need them.
- Don't Memorize Hooks — Understand the Rules I tried memorizing useEffect dependency arrays like a recipe. That fails.
The core rules:
Only call hooks at the top level (not inside loops/conditions).
Only call hooks from React functions.
Once I understood why the rules exist (React needs a stable order of hooks), everything clicked. useEffect isn't a lifecycle method—it's a synchronization tool.
- You Will Struggle With Keys and Re-renders Your app will re-render constantly. Sometimes 50 times a second. Sometimes the whole page when you type one letter.
The problem is almost always:
Missing or bad key props in lists (don't use index!)
Not memoizing components (React.memo, useCallback, useMemo)
Golden rule: If you're passing a function down to a child component, wrap it in useCallback. Otherwise, that child re-renders every single time.
Final Takeaway
React is a tool, not a religion. It's okay to not know everything on day one. But mastering vanilla JavaScript first? That's non-negotiable.
What’s one thing you wish you knew before learning React? Drop it in the comments 👇