DEV Community: Srushti Patil

[Boost]

Srushti Patil — Mon, 18 Aug 2025 15:03:58 +0000

Srushti Patil

Jul 30 '25

🪜 Prop Drilling in React: Why Are My Props Falling Through the Floor?

#webdev #programming #javascript #react

Comments

3 min read

🔍 React useEffect Demystified: A Beginner’s Guide

Srushti Patil — Mon, 18 Aug 2025 13:38:52 +0000

When you start with React, useState feels simple — it stores values and re-renders your component.
But then comes useEffect… and suddenly, beginners ask:

“Why is my code running twice?”
“Why do I need cleanup?”
“What’s this dependency array thing?”

Let’s break it down step by step with real-life analogies!

🏠 What is a Side Effect?

In programming, a side effect is something that happens outside the main flow of your code.

👉 Think of it like this:

You enter your room → the light automatically turns on.

You leave the room → the light turns off.

The room is your component.
The light is a side effect.
It happens because of your presence, but it’s not the main job of being in the room.

In React, these side effects could be:

Fetching data from an API
Setting up event listeners
Starting/stopping a timer
Updating the document title

⚡ Meet useEffect

Here’s the syntax:

useEffect(() => {
  // side effect code here
  return () => {
    // cleanup code here (optional)
  };
}, [dependencies]);

The first function is what runs as the side effect.
The return function is the cleanup (think of it as “turning off the light when you leave”).
The [dependencies] array tells React when to run the effect.

📦 Real-Life Example: Online Shopping

You add a product to your cart → instantly, you get an order confirmation email.

The cart = State
The email = Side effect

import { useState, useEffect } from "react";

function Cart() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    console.log("📧 Sending confirmation email…");
  }, [items]); // runs whenever items change

  return (
    <div>
      <button onClick={() => setItems([...items, "Shoe"])}>Add Shoe</button>
      <p>Items: {items.join(", ")}</p>
    </div>
  );
}

🔄 Dependency Array in useEffect

🧃 Example 1: No Dependency Array → Runs on Every Render

Imagine you open a fridge — every time you even peek inside, the fridge alarm beeps. Annoying, right?

useEffect(() => {
  console.log("Effect ran!");
});

📌 This runs every single render, which can cause unnecessary work.

📦 Example 2: Empty Array [] → Runs Only Once

Like a fridge alarm that only beeps once when you first open it.

useEffect(() => {
  console.log("Effect ran only once (on mount).");
}, []);

📞 Example 3: With Dependencies [count] → Runs When Count Changes

Think of it like a reminder that only triggers when a specific condition changes.

useEffect(() => {
  console.log("Effect ran because count changed:", count);
}, [count]);

📌 Effect re-runs only when the count changes.

🧹 Why Cleanup Functions Matter

Cleanup = “turning things off” before setting them up again.
Without cleanup, you can end up with duplicate event listeners, memory leaks, or multiple timers running at once.

🎵 Example 4: Timer Without Cleanup (Buggy)

useEffect(() => {
  const interval = setInterval(() => {
    console.log("⏰ Timer tick...");
  }, 1000);
}, [count]);

Every time the count changes, a new interval starts.
Old intervals are never cleared → multiple timers run together → app lags.

✅ Example 5: Timer With Cleanup (Correct)

useEffect(() => {
  const interval = setInterval(() => {
    console.log("⏰ Timer tick...");
  }, 1000);

  return () => {
    clearInterval(interval); // cleanup old timer
    console.log("🧹 Timer cleaned up");
  };
}, [count]);

📌 Now, whenever the count changes:

Old timer is cleared. The new timer starts fresh.
Just like turning off the old alarm before setting a new one.

[Boost]

Srushti Patil — Mon, 18 Aug 2025 11:41:49 +0000

Srushti Patil

Aug 11 '25

✨ React To-Do App: A Beginner’s Thinking Guide to Building from Scratch

#react #beginners #javascript #webdev

Comments

3 min read

✨ React To-Do App: A Beginner’s Thinking Guide to Building from Scratch

Srushti Patil — Mon, 11 Aug 2025 16:08:27 +0000

“How do I even start building something in React?”

If you've asked yourself that question, you’re not alone. React can feel intimidating at first, but when you break it down one thought at a time, it becomes a superpower.

Let’s walk through building a To-Do App — not just the code, but the thinking process behind every line. This blog isn’t about copy-pasting; it’s about helping you develop a builder’s mindset.

🧠 Step 1: Think in Components

"What am I building?"
A To-Do App is a perfect starter project because it helps you practice:

Displaying a list
Adding new items
Updating item state (like marking it done)
Removing items

So let’s break it into components:

App: The heart that holds everything.
TodoList: Displays the list of items.
TodoItem: Represents one task.

⚙️ Step 2: Set Up the Project

We’re using Vite for a fast and modern React setup.

npm create vite@latest react-todo-app -- --template react
cd react-todo-app
npm install
npm run dev

Open src/App.jsx — that’s where your app lives.

📦 Step 3: Start from the Middle — The App.jsx
When I build something new, I don’t write everything at once. I start with what I understand best — in this case, managing the list of todos.

Here’s the code (with thought bubbles):

import { useState } from 'react';
import TodoList from './components/TodoList';

function App() {
  const [todos, setTodos] = useState([]); // 🧠 The to-do list
  const [text, setText] = useState('');   // ✍️ What the user is typing

  const addTodo = (e) => {
  e.preventDefault(); // ⛔ Prevent page refresh when form is submitted
  if (text.trim()) {
    const newTodo = {
      id: Date.now(),        // Unique ID using current timestamp
      text,                  // The text the user typed
      completed: false       // New tasks are not completed by default
    };
    setTodos([...todos, newTodo]); // ✅ Add the new task to the existing list
    setText('');                   // 🔄 Clear input field
  }
};


  // Toggle completion
  const toggleComplete = (id) => {
    setTodos(todos.map(todo =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ));
  };

  // Delete a task
  const deleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  return (
    <div>
      <h1>React To-Do App</h1>

      {/* 🧠 Add a task */}
      <form onSubmit={addTodo}>
        <input
          type="text"
          value={text}
          placeholder="Add a new task"
          onChange={(e) => setText(e.target.value)}
        />
        <button type="submit">Add</button>
      </form>

      {/* 🧠 Show the list */}
      <TodoList
        todos={todos}
        onToggle={toggleComplete}
        onDelete={deleteTodo}
      />
    </div>
  );
}

export default App;

🔍 What’s happening:

The form is submitted → The addTodo function is called.
If there's something typed (text.trim()), it creates a new todo object.
The new task is added to the existing todos array using the spread operator.
setText('') clears the input so the user can type the next task.
Every task has a unique ID.
In deleteTodo → filter() creates a new array excluding the task with the matching ID.
The new filtered array is set back into the state using setTodos().
map() goes through all tasks.
In toggleComplete → when it finds the one with the matching ID, it flips the value of completed.
The ...todo keeps everything else the same, only changing completed.

🔄 Step 4: Build TodoList & TodoItem

Why separate them?

Because every task can be reused, styled, or enhanced on its own. Keeping things modular = clean code.

TodoList.jsx

import TodoItem from './TodoItem';

function TodoList({ todos, onToggle, onDelete }) {
  return (
    <ul>
      {todos.map(todo => (
        <TodoItem
          key={todo.id}
          todo={todo}
          onToggle={onToggle}
          onDelete={onDelete}
        />
      ))}
    </ul>
  );
}

export default TodoList;

TodoItem.jsx

function TodoItem({ todo, onToggle, onDelete }) {
  return (
    <li>
      <span
        onClick={() => onToggle(todo.id)}
        style={{
          textDecoration: todo.completed ? 'line-through' : 'none',
          cursor: 'pointer',
          marginRight: '10px'
        }}
      >
        {todo.text}
      </span>
      <button onClick={() => onDelete(todo.id)}>❌</button>
    </li>
  );
}

export default TodoItem;

🧩 Step 5: Test the Flow (and Think Like the User)

Can I add a task?
Can I mark it as done?
Can I delete it?
Does the app feel responsive and logical?

*If yes, congrats! You’ve just built your first real React app *🎉

🌱 Thought-Driven Dev Tips

Don’t start with a blank screen — start with what makes sense to you.
Build piece by piece. Get one feature working before adding the next.
Keep asking: "What should happen when the user clicks here?"
Think in state: “What changes in the app when I do something?”

[Boost]

Srushti Patil — Mon, 11 Aug 2025 16:07:45 +0000

Srushti Patil

Jul 30 '25

🪜 Prop Drilling in React: Why Are My Props Falling Through the Floor?

#webdev #programming #javascript #react

Comments

3 min read

🪜 Prop Drilling in React: Why Are My Props Falling Through the Floor?

Srushti Patil — Wed, 30 Jul 2025 09:50:25 +0000

🫣 Excited to Build Your First React Component — A To-Do App?
But wait✋… there's something important you need to understand first:

Before diving into buttons, inputs, and that shiny “Add Task” feature, let’s talk about a concept you’ll definitely run into while building even the simplest React apps — especially a To-Do List.

It’s called prop drilling.

🧠 What’s That?

when you're starting with React, you quickly meet a concept that feels simple at first — passing data using props.

But then… you start passing props from one component → to another → to another → and before you know it, you're "prop drilling" and your app feels like a game of Chinese whispers.

Let’s break down what prop drilling is, why it can be a problem, and how you can handle it like a pro (without losing your cool).

🧠 First, What Are Props?

Props (short for “properties”) are how components in React talk to each other.

For example: You’re passing the name prop to the Greeting component. Simple, right?

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

<Greeting name="Srushti" />

🚪 Now Enter: Prop Drilling
Let’s say you have a component hierarchy like this:

App
└── Parent
    └── Child
        └── GrandChild

And you want to pass some data from the App to the GrandChild.

That means:

App passes props to Parent
Parent passes it to the Child
Child passes it to GrandChild
Even if Parent and Child don’t care about that data, they're just the middlemen.

That’s prop drilling: passing data through components that don’t need it, just so it can reach the one that does.

📦 Code Example: Prop Drilling in Action

function App() {
  const user = "Srushti";
  return <Parent user={user} />;
}

function Parent({ user }) {
  return <Child user={user} />;
}

function Child({ user }) {
  return <GrandChild user={user} />;
}

function GrandChild({ user }) {
  return <h2>Hello from GrandChild, {user}!</h2>;
}

🤔 Why Is Prop Drilling a Problem?

Components get bloated with props they don’t even use
It’s harder to refactor or reorganize your UI
Debugging becomes confusing — you lose track of where the data is coming from
It breaks the separation of concerns — components become too tightly coupled

🧯So How Do We Fix It?
React gives us tools to avoid prop drilling when it gets annoying:

Context API (built-in solution) You can create a global-ish state and share it with any component — no need to pass props step-by-step.

const UserContext = createContext();

function App() {
  return (
    <UserContext.Provider value="Srushti">
      <Parent />
    </UserContext.Provider>
  );
}

function GrandChild() {
  const user = useContext(UserContext);
  return <h2>Hello {user}!</h2>;
}

✅ Only the component that needs the value uses it. No middleman components needed.

🧼 When Is Prop Drilling Okay?
Sometimes, prop drilling is fine, especially in small apps or for a few levels. Don’t over-engineer.

But if:

You’re passing the same prop through 3+ components
Or your UI is deeply nested

👉 It’s time to consider Context or state management libraries like Redux, Zustand, or React Query.

🎯 Final Thoughts

Prop drilling is a common growing pain in React. It means you’re building something big enough to care about component communication — that’s a good thing.

Just remember:

Props are great for clear, direct communication
Context is great for global, indirect communication
Know when to drill, and when to chill 🧊

🧠 State of Mind: React useState Made Simple — Part 2

Srushti Patil — Sun, 27 Jul 2025 15:09:06 +0000

Welcome back, React explorer! 🚀
In

Srushti Patil

Jul 20 '25

State of Mind: React useState Made Simple - Part 1

#react #webdev #programming #beginners

Comments 1

2 min read

, we cracked open the treasure chest called useState and took a peek at its shiny gems. You now know how to declare, update, and render simple state. But hey—React’s state is more than just counters and toggles.

Let’s level up your state game in Part 2! 🎮
We’ll cover some “real-world” scenarios, common mistakes, and a fun mini-project. Ready? Let’s dive in.

🌱 1. Multiple Pieces of State? No Problem!
React lets you track multiple independent values using useState. Think of it like having multiple notepads instead of stuffing everything into one page.

const [name, setName] = useState('');
const [age, setAge] = useState('');

Each useState is totally independent — they won’t interfere with each other. Use this when your variables don’t need to be bundled.

🧠 Tip: Name your state and setters clearly. It makes debugging 100x easier.

🔁2. When Your Update Depends on the Previous Value
Let’s say you have a counter. You click a button twice really fast:

setCount(count + 1);
setCount(count + 1);

Surprise! It only increases by 1 😱

Why? Because setState is asynchronous and React batches updates for performance.

Fix it with the function form:

setCount(prevCount => prevCount + 1);

🧼 3. Don't Mutate the State Directly 🙅‍♀️
Tempting, right?

user.name = 'Bob';

🚨 Big No-No. React won’t notice the change and won’t re-render.

Instead, create a new version of the object or array:

setUser(prev => ({ ...prev, name: 'Bob' }));

Same for arrays:

setTasks(prev => [...prev, newTask]);

⏳ 4. State Updates Are Not Instant

Let’s say you do this:

setName('Bob');
console.log(name); // Still prints the old name

That’s because useState updates the state after the component re-renders. The new value will be there on the next render.

🔄 Always think in terms of next render, not next line.

📦 5. Storing Objects & Arrays in State

You’re not limited to strings and numbers!

const [user, setUser] = useState({ name: '', age: 0 });

When updating:


setUser(prev => ({
  ...prev,
  name: 'React Learner',
}));

Arrays? Same deal:

const [tasks, setTasks] = useState([]);
setTasks(prev => [...prev, 'Learn React']);

Always copy the previous state to keep things immutable.

⚠️ 6. Common Mistakes Beginners Make

❌** Mistake **
Directly modifying state (e.g., stateVar = newValue)

Reading updated state right after calling setState

Forgetting to spread objects/arrays
Not using function form for prev-dependent updates

✅** Instead Do**
Use the setter (setState)
Wait for the next render
Use ...prevState to copy
Use setCount(prev => prev + 1)

👀 Up Next in Part 3...
In Part 3, we’re rolling up our sleeves to build something real — a simple To-Do App 📝.
We’ll also learn how to pass state around, split components, and build a tiny app that teaches big React lessons.

Ready to turn your knowledge into something interactive?
_
👉 See you in Part 3!_

[Boost]

Srushti Patil — Sun, 27 Jul 2025 13:59:29 +0000

JSX is NOT HTML (And That’s Okay 😌)

Srushti Patil ・ Jul 14

#webdev #beginners #react #jsx

[Boost]

Srushti Patil — Sun, 20 Jul 2025 08:58:21 +0000

Srushti Patil

Jul 20 '25

State of Mind: React useState Made Simple - Part 1

#react #webdev #programming #beginners

Comments 1

2 min read

State of Mind: React useState Made Simple - Part 1

Srushti Patil — Sun, 20 Jul 2025 02:12:56 +0000

Part 1: What is State? And Why Should I Care?

When you're building an interactive app with React, you want your components to remember stuff.

But React doesn’t just magically remember things like:

Whether a button was clicked
What the user typed into a field
If a modal is open or closed

That’s where state comes in.

🤔 What Is “State”?
Think of the state like your app’s memory.
React provides a way to store values within a component that change over time.

📦 It’s like a mini storage unit inside your component — and when you change what’s inside, React updates the UI automatically!

🧠 Real-World Analogy: Mood Ring
Imagine a React component is like a mood ring.
_
If you're happy, it turns green

If you're sad, it turns blue

If you're excited, it glows purple_

Your mood is the state — it changes based on how you're feeling, and the ring (UI) reacts to it.

🧩 Enter useState()
To give our component a memory, we use a React Hook called useState.

import React, { useState } from 'react';

function MoodRing() {
  const [mood, setMood] = useState('😊');

  return (
    <div>
      <h2>Your mood: {mood}</h2>
      <button onClick={() => setMood('😢')}>Sad</button>
      <button onClick={() => setMood('😄')}>Happy</button>
    </div>
  );
}

👀 What’s Happening Here?

const [mood, setMood] = useState('😊');

You're telling React:

"Hey, I need a piece of memory called mood"
"Set it initially to 😊"
"Give me a function setMood to change it"
When setMood is called, React updates the value of mood

Re-renders the component with the new mood

🧪 Beginner Tip: Always Use setState
You shouldn’t modify state variables directly:

mood = '😡'; // ❌ Wrong!
setMood('😡'); // ✅ Correct!

Why? Because React won’t know something changed unless you use the setter function (setMood). That’s how React knows it needs to update the UI.

📌 Coming Up in Part 2...
Now that you know what state is, in the next part we’ll explore:

Multiple useState calls
Storing objects/arrays
Best practices and common mistakes

Stay tuned for:
👉 “Part 2: Don’t Be Shy, useState All the Things!”

[Boost]

Srushti Patil — Sun, 20 Jul 2025 01:57:31 +0000

Srushti Patil

Jul 13 '25

🚀 React for Absolute Beginners: What the Heck Is a Component?

#react #webdev #beginners #javascript

Comments 7

1 min read

[Boost]

Srushti Patil — Wed, 16 Jul 2025 14:40:20 +0000

JSX is NOT HTML (And That’s Okay 😌)

Srushti Patil ・ Jul 14

#webdev #beginners #react #jsx