DEV Community: Ruby Dahal

useEffect Finally Made Simple ( The way I wished someone explained me) ✨

Ruby Dahal — Wed, 09 Sep 2026 11:34:13 +0000

Do you find understanding the useEffect hook in React hard? Honestly, I did too.

When I first started learning React, useEffect looked simple at first, but things like dependencies and cleanup made it confusing pretty quickly.

So let's break it down.

What is `useEffect`?

useEffect is a built-in React Hook that lets functional components perform side effects.

A side effect is basically something your component does outside of simply rendering the UI.

For example:

Fetching data from an API
Starting a timer
Adding an event listener
Updating the page title
Connecting to an external service

Basic Format

useEffect(() => {
  // Effect code

  return () => {
    // Cleanup code
  };
}, []);

There are three main parts.

1. The Effect

This is the function containing the code you want to run.

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

By default, useEffect runs after React renders the component.

2. The Dependency Array

The second part is the dependency array:

useEffect(() => {
  console.log(`Count is ${count}`);
}, [count]);

It tells React when the effect needs to run again.

Empty array

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

The effect doesn't re-run because of changing dependencies.

Note: In development, React Strict Mode can run an effect's setup and cleanup more than once, so don't panic if you see your console log twice.

With a dependency

useEffect(() => {
  console.log(`Count is ${count}`);
}, [count]);

The effect runs again when count changes.

No dependency array

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

The effect runs after every render.

A quick way to remember:

[]          → no dependency-based re-runs
[count]     → runs when count changes
(no array)  → runs after every render

3. The Cleanup Function

The cleanup function is used to stop or remove something that your effect started.

For example, if you start a timer:

useEffect(() => {
  const timer = setInterval(() => {
    console.log("Running...");
  }, 1000);

  return () => {
    clearInterval(timer);
  };
}, []);

When the component disappears, the cleanup function stops the timer.

Cleanup is commonly used for:

Timers
Event listeners
Subscriptions
Connections

Think of it like this:

Effect = Set something up

Cleanup = Clean it up

A Simple Example

Here's a basic counter:

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

  useEffect(() => {
    console.log(`Count is ${count}`);
  }, [count]);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

Whenever count changes, React renders again, notices that the dependency changed, and runs the effect.

Pretty simple, right?

But this is where people often run into problems. Because there are some common mistakes you should know about.

Common Mistakes

Mistake 1: Forgetting Cleanup

Imagine you create a timer but never stop it:

useEffect(() => {
  const timer = setInterval(() => {
    console.log("Hello");
  }, 1000);
}, []);

A better version is:

useEffect(() => {
  const timer = setInterval(() => {
    console.log("Hello");
  }, 1000);

  return () => clearInterval(timer);
}, []);

Whenever your effect creates something that needs to be stopped or removed, remember to clean it up.

Mistake 2: Unstable Dependencies

Objects, arrays, and functions are compared by reference, not their contents.

For example:

const user = {
  id: 193,
  name: "Rubi"
};

useEffect(() => {
  fetchUser(user);
}, [user]);

If user is recreated on every render, React sees a new object reference and may run the effect again.

If you only need the ID, depend on the primitive value instead:

useEffect(() => {
  fetchUser(user.id);
}, [user.id]);

Now the effect only needs to re-run when user.id changes.

Mistake 3: Using useEffect for Everything

Sometimes you don't need useEffect at all.

For example, don't use an effect just to respond to a button click:

const [submitted, setSubmitted] = useState(false);

useEffect(() => {
  if (submitted) {
    postForm(formData);
  }
}, [submitted]);

<button onClick={() => setSubmitted(true)}>
  Submit
</button>

You can simply do:

<button onClick={() => postForm(formData)}>
  Submit
</button>

If something happens directly because of a user action, an event handler is usually the better choice.

Similarly, if you need to measure or adjust the DOM before the browser paints, useLayoutEffect may be more appropriate.

Wrapping Up

useEffect is actually pretty simple once you understand its three main parts:

Effect → the code you want to run.

Dependencies → when the effect should run again.

Cleanup → what needs to be stopped or removed.

And before writing an effect, ask yourself:

“Do I actually need useEffect here?”

Once you understand when to use it, what it depends on, and how to clean it up, useEffect becomes a lot less scary.

10 JavaScript Tips I Wish I Knew as a Beginner.

Ruby Dahal — Tue, 08 Sep 2026 07:39:48 +0000

So, You Want to Learn JavaScript? Read This First.

When I first started learning JavaScript, I honestly thought it would be pretty easy.

I mean, I already knew a little HTML and CSS, so I thought JavaScript would just be about adding some buttons and making things move.

Yeah... not exactly.

JavaScript is really useful, but it can also be confusing, especially when you're just starting. Sometimes your code works perfectly, and sometimes you change one small thing and suddenly you have no idea what happened.

But that's also what makes learning it interesting.

JavaScript is basically what makes a normal webpage interactive. You can use it to make buttons work, create animations, validate forms, build games, make websites dynamic, and a lot more.

The more I learn, the more I realize there's a lot to JavaScript. So if you're also a beginner, here are some things I wish someone had told me when I started.

1. Use `const` and `let` instead of `var`

If you're watching older JavaScript tutorials, you'll probably see var everywhere.

At first, I didn't really understand why people kept saying to use let and const instead. But it's actually pretty simple.

A basic rule is:

Use const when you don't need to change the value.
Use let when you know the value will change.
You usually don't need var in modern JavaScript.

For example:

const studentName = "Shridha";

let attendance = 80;
attendance += 1;

Here, studentName isn't being changed, so const makes sense.

But attendance changes from 80 to 81, so we use let.

This might seem like a small thing, but getting used to it early makes your code much easier to understand.

2. Get comfortable with the console

One thing I learned pretty quickly is that console.log() is actually really useful.

When something doesn't work, I sometimes just stare at the code thinking, "What is wrong with this?"

Instead of doing that, just check what's actually happening.

const username = "Shridha";

console.log(username);

You can use it for more than just variables too.

console.log("User:", user);
console.log("Users:", users);
console.log("Result:", calculateTotal());

It can help you see what's inside an array, what a function is returning, whether your data is coming from an API, and so on.

It sounds very basic, but you'll probably use console.log() way more than you expect.

So when you're confused, don't guess.

Log it.

3. Read the error before searching for it

Red error messages are honestly one of the most annoying things when you're a beginner.

At first, I used to see an error and immediately search the whole thing online.

But it's actually worth reading the error first.

For example:

ReferenceError: username is not defined

You can break it down pretty easily.

ReferenceError means JavaScript can't find something you're trying to use.

username is the thing it can't find.

not defined basically means JavaScript looked for it and couldn't find it.

Then look at the line number the error gives you and check what's happening there.

You don't need to understand every error immediately. You'll learn them as you come across them.

The important thing is not to panic when you see an error.

An error doesn't mean you're bad at coding.

It usually just means your code is trying to tell you something.

4. Understand truthy and falsy values

This was one of those JavaScript concepts that confused me a little at first.

JavaScript doesn't only treat true and false as true and false.

Some other values are considered falsy:

false
0
""
null
undefined
NaN

Most other values are truthy.

For example:

const username = "";

if (username) {
  console.log("Username exists");
}

The username is an empty string, so it's falsy.

Because of that, the console.log() doesn't run.

You'll see this kind of thing quite often when working with forms, user input, APIs, and other data.

Once you understand truthy and falsy values, some JavaScript conditions that looked confusing before start making more sense.

5. Use template literals for strings

When I started, I used + whenever I wanted to combine a string and a variable.

Something like this:

const name = "Shridha";

console.log("Hello " + name + ", welcome back!");

There's nothing wrong with it, but it can get messy when the sentence gets longer.

A cleaner way is to use template literals.

const name = "Shridha";

console.log(`Hello ${name}, welcome back!`);

You use backticks instead of normal quotation marks, and then put your variables inside ${}.

You can also put calculations inside them:

const price = 500;
const quantity = 2;

console.log(`Total: ${price * quantity}`);

This is one of those small things that makes your code look and feel much cleaner.

6. Learn functions early

Functions can seem a little confusing when you first see them, but don't avoid them.

They're actually one of the most useful parts of JavaScript.

Let's say you want to greet three people:

console.log("Hello Shridha");
console.log("Hello Alex");
console.log("Hello Sam");

Instead of writing the same thing again and again, you can make a function:

function greet(name) {
  console.log(`Hello ${name}`);
}

greet("Shridha");
greet("Alex");
greet("Sam");

Now you have one piece of code that you can reuse.

Functions are also useful because they help you break your code into smaller parts.

Instead of having one huge block of code doing everything, you can have different functions doing different jobs.

You'll definitely use them a lot once you start building actual projects.

7. Learn `.map()`, `.filter()`, and `.forEach()`

If you're learning JavaScript, you'll probably spend a lot of time working with arrays.

For example:

const numbers = [1, 2, 3, 4];

Let's say you want to double every number.

You can use .map():

const doubled = numbers.map(number => number * 2);

console.log(doubled);

This gives:

[2, 4, 6, 8]

If you only want numbers greater than 2, you can use .filter():

const filtered = numbers.filter(number => number > 2);

console.log(filtered);

And if you want to do something with every item, you can use .forEach():

numbers.forEach(number => {
  console.log(number);
});

You don't have to memorize every array method right now.

I'd say start with these three and actually understand what they do.

If you're planning to learn React later, you'll probably notice .map() everywhere.

8. Write comments, but don't comment everything

Comments are useful, especially when your code gets longer.

But you don't need to explain something that's already obvious.

For example:

// Create a variable called username
const username = "Shridha";

The code already tells us that.

A better comment would explain something that isn't obvious:

// Retry once because the API sometimes takes longer to respond
fetchData();

That actually gives us some extra information.

I think a good way to think about comments is:

Don't explain what the code is doing. Explain why you're doing it.

Also, remember that comments are for humans, not JavaScript. They won't make your code work if the actual code is wrong.

9. Don't try to solve everything at once

This is probably something every beginner needs to hear.

Let's say you want to build a to-do app.

If you think:

"I have to build the whole application."

it can feel like a lot.

Instead, break it down.

First, make an input.

Then make a button.

Then figure out how to get the text from the input.

Then display it.

Then add a delete button.

Then maybe add a completed state.

Then save the tasks.

Suddenly, the project doesn't seem as scary anymore.

You're just solving one small problem after another.

I still find myself doing this whenever something feels too complicated.

You don't have to know the whole solution before you start.

Sometimes you just need to figure out the next step.

10. Build things before you feel ready

This is probably my biggest tip.

Watching tutorials feels great because everything works.

You follow along, type the code, and suddenly you have a working project.

Then you try to build something on your own and realize:

"Wait... I don't remember how to do any of this."

That's normal.

It doesn't mean you learned nothing.

It means you actually found the part you need to practice.

Start with small projects like:

Calculator
To-do list
Quiz app
Countdown timer
Weather app
Notes app
Simple portfolio
Expense tracker

Your first project probably won't be amazing.

Mine wouldn't be either.

The point isn't to build something perfect. The point is to actually use what you've learned.

You'll get stuck.

You'll search things.

You'll make mistakes.

You'll probably break the code a few times.

But every time you fix something, you understand a little more than you did before.

One More Tip: Don't Try to Memorize JavaScript

This is something I wish I understood earlier.

When you're learning programming, it can feel like you need to remember everything.

You don't.

There are way too many methods, functions, rules, and pieces of syntax to remember all of them.

Even developers look things up.

Maybe you forget how .reduce() works.

Search it.

Maybe you don't remember the exact syntax for something.

Look it up.

Maybe you get an error you've never seen before.

Search the error.

That's completely normal.

What matters more is understanding what you're trying to do and knowing how to find the information you need.

Over time, you'll naturally remember the things you use often.

So don't spend all your time trying to memorize JavaScript.

Spend more time actually using it.

Final Thoughts

JavaScript can definitely be confusing when you're starting.

There are going to be times when you look at your code for 20 minutes and then realize you forgot one character.

It happens.

There will also be times when you don't understand something even after watching three different tutorials.

That's okay too.

You don't need to know everything before you start building.

Learn something small.

Try it yourself.

Break your code.

Figure out why it broke.

Fix it.

Then try something a little harder.

That's basically how I'm learning JavaScript, and honestly, I think building things and making mistakes teaches you much more than just watching tutorials.

So if you're a beginner right now, don't worry too much about being perfect.

Just keep coding.

And eventually, JavaScript will start making a little more sense.

Happy coding! 🚀

DEV Community: Ruby Dahal

useEffect Finally Made Simple ( The way I wished someone explained me) ✨

What is useEffect?

Basic Format

1. The Effect

2. The Dependency Array

Empty array

With a dependency

No dependency array

3. The Cleanup Function

A Simple Example

Common Mistakes

Mistake 1: Forgetting Cleanup

Mistake 2: Unstable Dependencies

Mistake 3: Using useEffect for Everything

Wrapping Up

10 JavaScript Tips I Wish I Knew as a Beginner.

So, You Want to Learn JavaScript? Read This First.

1. Use const and let instead of var

2. Get comfortable with the console

3. Read the error before searching for it

4. Understand truthy and falsy values

5. Use template literals for strings

6. Learn functions early

7. Learn .map(), .filter(), and .forEach()

8. Write comments, but don't comment everything

9. Don't try to solve everything at once

10. Build things before you feel ready

One More Tip: Don't Try to Memorize JavaScript

Final Thoughts

What is `useEffect`?

1. Use `const` and `let` instead of `var`

7. Learn `.map()`, `.filter()`, and `.forEach()`