Forem: Aryan Jain

React Props vs State: The Dynamic Duo Explained

Aryan Jain — Sun, 19 Oct 2025 08:08:29 +0000

If you’ve ever built a React app and wondered, “Should this go in props or state?”, you’re not alone. Props and state are like the Batman and Robin of React — different roles, but unstoppable when used together. 🦸‍♂️

Let’s break down what they are, how they differ, and how to use them without accidentally sending your app into chaos.

🎁 What Are Props?

Props (short for properties) are read-only inputs you pass from a parent component to a child component. Think of them like gifts 🎁 — you can give them to your children, but once given, they can’t change them (no take-backs!).

Example:

function Welcome(props) {
  return <h2>Hello, {props.name}!</h2>;
}

function App() {
  return <Welcome name="Aryan" />;
}

Here, App passes a name prop to Welcome. The child receives it and uses it. Simple, predictable, and beautifully unidirectional.

Props make components reusable. You can render or without rewriting the component.

🧠 What Is State?

While props come from the outside, state lives inside the component. State is data that can change over time — like a mood swing or your Wi-Fi connection during a storm. 🌩️

Example:

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </>
  );
}

Here, count is a state variable, and setCount updates it. When state changes, React automatically re-renders the component.

🔄 The Core Difference

Props are external inputs.
State is internal memory.

You can think of props as a function’s arguments and state as variables inside the function.

🧩 How Props and State Work Together

Imagine you’re building a todo app:

The parent holds the list of todos in its state.

The child receives each todo item as a prop and displays it.

When the user adds a new todo, the parent updates its state — React re-renders the list, and children receive updated props automatically.

This is what makes React reactive. ⚡

🚫 Common Mistakes to Avoid

Trying to modify props:

props.name = "John"; // ❌ Never do this!

Props are immutable. If you need to change data, manage it via state or pass a callback from the parent.

Overusing state:
Don’t put everything in state. Derived or temporary values can often be computed on the fly.

Prop drilling:
Passing props through multiple layers becomes messy. Use Context API or Redux to avoid that headache.

💡 Pro Tip: Lift State Up

When two components need to share data, move the state to their closest common ancestor and pass it down as props. This pattern — known as lifting state up — keeps your app’s data flow clean and predictable.

🎯 Conclusion

Props and state might seem similar at first, but they serve completely different purposes:

Props make components configurable and reusable.

State makes components dynamic and interactive.

Mastering when and where to use each is a huge step toward writing clean, maintainable React code.

So next time you’re unsure, remember:

Props tell your component what to do.
State lets your component do it.

Use them wisely — and your React app will run smoother than butter on a hot pancake. 🥞✨

⚡ Mastering React Performance Optimization: Speed Up Your Apps Like a Pro

Aryan Jain — Sun, 19 Oct 2025 08:04:55 +0000

When your React app starts lagging and buttons feel like they’re stuck in molasses, it’s time to face the truth — performance optimization is not optional. Whether it’s a large-scale dashboard or a simple to-do app, every millisecond counts. Luckily, React gives us plenty of tools (and a few tricks) to keep things fast and smooth.

Let’s explore how to make your React app feel as snappy as a caffeine-charged coder. ☕

🚀 1. Re-rendering — The Silent Performance Killer

React re-renders components whenever state or props change. That’s great… until it’s not. If too many components re-render unnecessarily, your app slows down faster than your Wi-Fi during a storm.

Tip: Use React.memo() to prevent re-renders when props don’t change.

  const UserCard = React.memo(({ name }) => {
  console.log("Rendered:", name);
  return <div>{name}</div>;
});

Now, UserCard will only re-render when name changes — not when something random happens elsewhere.

💡 2. useCallback and useMemo — Your New Best Friends

Sometimes you’re passing functions or complex calculations as props. React thinks, “New function? Must re-render!”

That’s where useCallback and useMemo step in.

const handleClick = useCallback(() => {
  console.log("Clicked!");
}, []);

And for expensive computations:

const sortedList = useMemo(() => sortList(items), [items]);

Both hooks tell React to remember things — because recalculating everything every render is like redoing your homework every time you open the notebook.

🧠 3. Virtualize Long Lists

Ever tried rendering 5,000 items in a list? Yeah, React can do it… but your browser might faint. 🥴

Instead, use windowing (also called virtualization). Libraries like react-window or react-virtualized render only what’s visible on screen.

npm install react-window

Example:

import { FixedSizeList as List } from "react-window";

<List height={400} itemCount={1000} itemSize={35} width={300}>
  {({ index, style }) => <div style={style}>Item {index}</div>}
</List>;

Now, your list is lightning-fast ⚡ even with thousands of items.

🧩 4. Avoid Inline Functions and Objects

Every time your component renders, new inline functions and objects are created. This makes React think things changed — even when they didn’t.

Instead of this:

<MyButton onClick={() => doSomething()} />

Do this:

const handleClick = useCallback(doSomething, []);
<MyButton onClick={handleClick} />

Small change, big win. 🎯

🔍 5. Lazy Loading and Code Splitting

If your bundle is heavier than a 10MB meme, users will notice. React’s lazy loading lets you split your app into smaller chunks and load them only when needed.

const AboutPage = React.lazy(() => import("./AboutPage"));

Wrap it with Suspense:

<Suspense fallback={<div>Loading...</div>}>
  <AboutPage />
</Suspense>

Now your users won’t download your entire app just to open one page.

🧰 6. Profiler API — Measure, Don’t Guess

React’s Profiler helps you measure where your app spends time rendering. You can use it via the React DevTools.

Remember: Optimization without measurement is like fixing a bug that doesn’t exist.

🎯 Final Thoughts

Optimizing React apps isn’t about writing “clever” code — it’s about writing smart, efficient code. Start small:

Memoize when needed.

Avoid unnecessary re-renders.

Split your code.

Measure performance before guessing.

React gives you all the tools — you just need to know when to use them.

So, next time your app feels sluggish, don’t panic. Take a sip of coffee ☕, open your profiler, and start optimizing one step at a time. Your future self (and your users) will thank you. 🙌

Understanding React Hooks: Simplifying State and Logic (Without Losing Your Mind)

Aryan Jain — Sun, 12 Oct 2025 12:18:29 +0000

🧠 Understanding React Hooks: Simplifying State and Logic (Without Losing Your Mind)

When React Hooks arrived in version 16.8, developers everywhere collectively sighed in relief — and maybe even shed a tear of joy.

Before Hooks, we were stuck writing class components, juggling this bindings, lifecycle methods, and mysterious bugs that made us question our career choices.

Hooks changed everything by letting us manage state and side effects directly inside functional components — simple, clean, and (mostly) headache-free.

🎯 Why Hooks Were Introduced

Hooks weren’t created just to make your code look fancy. They were designed to solve three serious React pain points:

Logic reuse: Sharing stateful logic between components felt like trying to fit an elephant through a cat door. We had to rely on awkward patterns like Higher-Order Components (HOCs) or Render Props — powerful but messy.
Complex components: Managing lifecycles with componentDidMount, componentDidUpdate, and componentWillUnmount often felt like keeping track of three toddlers on caffeine.
Learning curve: And don’t even get started on this. Forget to bind it once, and your app collapses faster than your weekend coding motivation.

Hooks solved all that. They made React simpler, more modular, and finally fun to write again.

⚙️ Core Hooks Explained (Without the Boring Bits)

💾 1. useState

The useState hook is where the magic starts. It lets you add state to functional components — no classes, no this, no drama.

const [count, setCount] = useState(0);

Now, count stores the value, and setCount updates it. Want to increase the count?
Just call setCount(count + 1). React handles the rest — it’s like having a personal assistant who never forgets to re-render.

⚡ 2. useEffect

useEffect is your go-to for side effects — things like fetching data, updating the DOM, or syncing with external systems.

useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]);

The [count] dependency array tells React, “Only run this when count changes.”
Without it, your effect will run after every render, which is a quick way to crash your app and your sanity.

You can also clean things up:

useEffect(() => {
  const timer = setInterval(() => setCount(c => c + 1), 1000);
  return () => clearInterval(timer);
}, []);

Because even side effects need housekeeping.

🌍 3. useContext

useContext helps you skip the prop-drilling nightmare. Instead of passing data down through five components, you can just grab it directly:

const user = useContext(UserContext);

Boom. Problem solved. Fewer props, fewer tears.

🔍 4. useRef

useRef is like that quiet coworker who’s always reliable.
It doesn’t cause re-renders, but it stores data or gives you direct access to DOM elements.
Perfect for focusing inputs, tracking previous values, or storing timers — all without any fuss.

🧩 5. Custom Hooks

Once you’ve mastered the basics, you can create custom hooks — reusable bits of logic that make your code cleaner and more elegant.

function useFetch(url) {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(setData);
  }, [url]);
  return data;
}

Now, instead of repeating fetch logic everywhere, you just call useFetch('/api/posts') and get on with your day.

💡 Why Developers Love Hooks

Cleaner code: No more messy class syntax or weird lifecycle juggling.
Reusable logic: Custom hooks let you DRY (Don’t Repeat Yourself).
Simpler debugging: Less “what’s this again?” confusion.
Future-proof: The React team loves Hooks, and so does the community.

🚀 Conclusion

React Hooks didn’t just simplify React — they made it fun again.
They bring a modern, functional flavor to development, letting you focus on logic over boilerplate.

So if you’re still clinging to class components like an old hoodie, maybe it’s time to upgrade.
Try useState, useEffect, and a few custom hooks. You’ll soon find your code cleaner, your components happier, and your debugging sessions far less stressful.

And remember:

With great power (and fewer this keywords) comes great React-ability. ⚡

🖋️ Written by Aryan
💬 *Follow me for more articles on React, JavaScript and front-end development!