10 Must-Know React Tricks for Beginners

 

It’s 2 AM, your code should work, but your component just stares back at you like a smug cat that knows you’re the problem.

You Google, Stack Overflow, maybe even beg ChatGPT (hey, we’ve all been there) — but nothing clicks.

I’ve been there. We all have.

But here’s the thing: professional React devs have a stash of sneaky tricks. Little power moves that make code cleaner, bugs rarer, and life easier.

They don’t teach these in tutorials. You only learn them in the trenches — or right here, if you’re lucky.

Let’s crack open the toolbox.

Photo by Lautaro Andreani on Unsplash

1. Use useRef For More Than Just DOM Access

Most beginners think useRef is just for grabbing DOM nodes. Cute.

const countRef = useRef(0);

useEffect(() => {
  countRef.current++;
  console.log('Rendered', countRef.current, 'times');
});

Boom. Now you’re tracking renders without triggering re-renders.

useRef Is your secret state that doesn't rerender the component? Like keeping a diary, your parents can’t…

Stop using useState for things that don’t affect UI. It’s overkill and slows things down.

2. Memoize Like You Mean It

If your app is slower than a snail on a treadmill, your components are probably re-rendering unnecessarily.

const memoizedValue = useMemo(() => computeHeavyStuff(data), [data]);

Or better yet:

const MyComponent = React.memo(({ data }) => {
  // clean and mean
});

Sarcastic Truth Bomb: If you’re not memoizing, you’re just flexing how much CPU you can waste.

3. Destructure Props Like a Boss

Tired:

function Button(props) {
  return <button>{props.label}</button>;
}

Wired:

function Button({ label }) {
  return <button>{label}</button>;
}

Cleaner, shorter, and more readable. Destructuring is free readability. Use it.

4. Colocate State and Logic

Stop scattering state like breadcrumbs across files. Keep the state close to the component that needs it.

Why? Because debugging a component with state managed 3 parents up is like fixing a car through the exhaust pipe.

5. Short-Circuit Rendering FTW

{isLoggedIn && <Dashboard />}

No need for clunky ternaries:

{isLoggedIn ? <Dashboard /> : null}

Unless you like writing extra code for no reason.

6. Conditional ClassNames Like a Pro

Ever seen this mess?

className={isActive ? 'btn active' : 'btn'}

Try this instead:

npm install classnames

import classNames from 'classnames';

className={classNames('btn', { active: isActive })}

Pro Move: Clean, scalable, readable.

7. Avoid Anonymous Functions in JSX

<button onClick={() => doSomething()}>Click</button>

Looks fine… until you realize it creates a new function every render.

Do this:

function handleClick() {
  doSomething();
}

<button onClick={handleClick}>Click</button>

Think Ahead: Performance isn’t an issue — until it is.

8. Know When to Use Context — and When NOT To

Context is powerful. Also dangerously overused.

Use it for themes, auth, and language. Don’t use it to pass everything everywhere. That’s prop drilling in disguise.

If your context is 5 levels deep and triggers 10 renders when one value changes — you messed up.

9. Custom Hooks = Your Superpower

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const item = window.localStorage.getItem(key);
    return item ? JSON.parse(item) : initialValue;
  });

useEffect(() => {
    window.localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

Reusability. Clean code. Fewer bugs. What’s not to love?

10. Lint Like a Lunatic

Install ESLint. Use Airbnb’s config. Set your editor to scream at you when you write bad code.

npx eslint --init

Real Talk: Linting catches 80% of dumb mistakes before they hit production.

Finally, React Doesn’t Suck — Your Habits Might

React isn’t hard. What’s hard is unlearning bad habits and leveling up your thinking. These 10 tricks? They’re just the tip of the iceberg.

Got your hot take? Angry disagreement? Mild appreciation?

Drop a comment. Smash that clap. Or roast me in the replies. Just don’t walk away without sharing your thoughts.

Stay curious, stay sarcastic, and keep building.

Don’t keep it to yourself. Share it with your team and level up together!