DEV Community: ABISHEK M

useEffect in React

ABISHEK M — Sat, 03 Oct 2026 16:47:16 +0000

React provides several built-in Hooks that help us manage different aspects of a component. One of the most commonly used Hooks is useEffect. It is mainly used to perform side effects in a React component.

What is `useEffect`?

useEffect is a React Hook that allows us to perform an operation after a component renders.

The basic syntax is:

useEffect(() => {
  // side effect code
});

To use useEffect, we need to import it from React:

import { useEffect } from "react";

What is a Side Effect?

A side effect is an operation that happens outside the normal process of calculating and returning the UI.

Common examples include:

Fetching data from an API
Updating localStorage
Setting a timer
Adding event listeners
Updating the browser document title
Subscribing to external services

For example:

useEffect(() => {
  document.title = "My React App";
});

Here, changing the browser tab title is a side effect.

Dependency Array

The dependency array controls when the effect should run.

1. Without a Dependency Array

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

When there is no dependency array, the effect runs after every render.

2. Empty Dependency Array

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

An empty dependency array means the effect runs after the initial render. This is commonly used for operations that need to happen when a component starts.

3. With Dependencies

useEffect(() => {
  console.log("Count changed");
}, [count]);

Here, count is a dependency. The effect runs after the initial render and again when the value of count changes.

Multiple dependencies can also be used:

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

The effect can run when either count or name changes.

`useState` and `useEffect`

useEffect is frequently used together with useState.

import { useState, useEffect } from "react";

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

  useEffect(() => {
    console.log("Count:", count);
  }, [count]);

  return (
    <div>
      <h1>{count}</h1>

      <button onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
}

When the button is clicked, count changes. React re-renders the component, and because count is a dependency, the effect runs again.

The basic flow is:

State changes
     ↓
React re-renders
     ↓
UI updates
     ↓
useEffect runs

Cleanup Function

Some effects create resources that need to be stopped or removed. For example, timers and event listeners.

useEffect allows us to return a cleanup function:

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

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

The cleanup function helps prevent unnecessary timers, listeners, or subscriptions from continuing after they are no longer needed.

Real-World Example

A common example is saving data to localStorage.

useEffect(() => {
  localStorage.setItem("tasks", JSON.stringify(tasks));
}, [tasks]);

Whenever the tasks state changes, the latest tasks are stored in localStorage.

Important Rules to Remember

There are three important patterns to remember:

// 1. No dependency array
useEffect(() => {});

Runs after every render.

// 2. Empty dependency array
useEffect(() => {}, []);

Runs after the initial render.

// 3. Dependency array
useEffect(() => {}, [count]);

Runs after the initial render and when count changes.

Conclusion

useEffect is an important React Hook for handling side effects. It is especially useful when working with APIs, timers, localStorage, event listeners, subscriptions, and other external operations.

The easiest way to understand useEffect is to remember:

Effect = What should happen?
Dependency array = When should it happen?

Once you understand the dependency array and cleanup function, you have a strong foundation for using useEffect in real React applications.

Prop Drilling in React

ABISHEK M — Fri, 02 Oct 2026 17:52:31 +0000

In React, props are used to pass data from a parent component to a child component. Props are an important part of React because they allow components to share information. However, when data needs to travel through many levels of components, it can lead to a situation called Prop Drilling.

Prop drilling means passing data from a parent component to a deeply nested child component through intermediate components, even when those intermediate components do not need the data.

For example, imagine the component structure:

App
 ↓
Parent
 ↓
Child
 ↓
GrandChild

Suppose the App component has a username that is required by GrandChild.

function App() {
  const username = "Abishek";

  return <Parent username={username} />;
}

The Parent component receives the username and passes it to Child:

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

Then Child passes it to GrandChild:

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

Finally, GrandChild uses the username:

function GrandChild({ username }) {
  return <h1>Hello {username}</h1>;
}

Here, Parent and Child don't actually use the username. They only pass it to the next component. This is called prop drilling.

Prop drilling is not always a problem. If data only passes through one or two components, normal props are simple and useful. However, when data needs to pass through many levels, the code can become difficult to read, maintain, and modify.

React provides solutions such as the Context API to avoid unnecessary prop drilling. Context allows deeply nested components to access shared data without manually passing props through every intermediate component.

In simple terms:

Props: Parent → Child
Prop Drilling: Parent → Child → Grandchild → Deep Child

Understanding prop drilling helps developers decide when normal props are sufficient and when a different approach to sharing data would make the application easier to manage.

Props in React – Introduction

ABISHEK M — Thu, 01 Oct 2026 18:27:56 +0000

When building React applications, we often create multiple components. These components need to communicate with each other and share data. Props are one of the most important concepts used for passing data between React components.

The word Props is short for Properties. Props allow us to pass data from a parent component to a child component.

What are Props?

Props are read-only data passed from a parent component to a child component.

For example, imagine a Student component. Instead of writing a separate component for every student, we can create one reusable Student component and pass different student information using props.

function App() {
  return <Student name="Abishek" />;
}

function Student(props) {
  return <h1>Hello {props.name}</h1>;
}

Here, name="Abishek" is a prop.

The Student component receives this data through the props object. We can access the value using:

props.name

The output will be:

Hello Abishek

How Props Work

The basic data flow looks like this:

Parent Component
       ↓
     Props
       ↓
Child Component

For example:

function App() {
  return <Student name="Abishek" age={21} />;
}

function Student(props) {
  return (
    <div>
      <h1>{props.name}</h1>
      <p>Age: {props.age}</p>
    </div>
  );
}

In this example, the App component is the parent, while Student is the child.

The parent passes two props:

name="Abishek"
age={21}

The child receives them through props.

Conceptually, the props object looks like:

{
  name: "Abishek",
  age: 21
}

Why Do We Use Props?

Props make React components reusable and dynamic.

For example, we can use the same Student component for different students:

function App() {
  return (
    <>
      <Student name="Abishek" age={21} />
      <Student name="Rahul" age={22} />
      <Student name="Arun" age={20} />
    </>
  );
}

We don't need to create three different components. The same component can display different information based on the props it receives.

Props are Read-Only

One important rule is that props should not be modified by the child component.

The child can read and use props, but it should not directly change them.

function Student(props) {
  // props.name = "Rahul"; ❌ Don't modify props
}

If data needs to be changed, React provides other mechanisms such as state and event handlers.

Real-World Example

Think about an online shopping website.

A reusable Product component might receive:

Product Name
Price
Image
Rating

Different products can pass different values to the same component.

<Product name="Laptop" price={50000} />
<Product name="Phone" price={25000} />
<Product name="Headphones" price={3000} />

The Product component can then display the information it receives.

This is one of the main reasons props are useful in React: one component can be reused with different data.

Props vs State

Props and state are both important in React, but they have different purposes.

Props	State
Passed from parent to child	Managed inside a component
Read-only	Can be updated
Used to pass data	Used to manage changing data
Makes components reusable	Makes components interactive

Conclusion

Props are a fundamental concept in React. They allow components to communicate and share data, mainly by passing information from a parent component to a child component. Props also make components reusable because the same component can display different information depending on the values it receives.

A simple way to remember props is:

Props = Data passed from Parent → Child

useState in React

ABISHEK M — Wed, 30 Sep 2026 17:47:35 +0000

When building interactive web applications with React, we often need to store values that can change over time. For example, a counter value can increase, a user's name can change, or a login status can switch between logged in and logged out. React provides a Hook called useState to handle these changing values.

What is useState?

useState is a React Hook that allows functional components to create and manage state.

State is a value that a component needs to remember between renders. When the state changes, React re-renders the component and updates the user interface.

The basic syntax is:

const [state, setState] = useState(initialValue);

For example:

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

Here, count is the current state value, setCount is the function used to update the state, and 0 is the initial value.

Importing useState

Before using useState, we need to import it from React:

import { useState } from "react";

We can then use it inside a functional component.

Understanding State and Setter Function

Consider this example:

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

Initially, the value of count is 0.

If we want to change it to 5, we should use:

setCount(5);

After the state update, React re-renders the component and the new value becomes available.

We should not directly modify the state like this:

count = 5; // ❌

Instead, we should use the setter function:

setCount(5); // ✅

The setter function tells React that the state needs to be updated.

Example: Counter

A simple counter is one of the best ways to understand useState.

import { useState } from "react";

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

  return (
    <>
      <h1>{count}</h1>

      <button onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </>
  );
}

export default App;

Initially, the screen displays 0. When the button is clicked, setCount(count + 1) updates the state. React then re-renders the component, and the screen displays the updated value.

The flow is:

User clicks button
        ↓
setCount()
        ↓
State changes
        ↓
React re-renders
        ↓
UI updates

What is Re-rendering?

A re-render means React runs the component again to determine what the updated user interface should look like.

For example, if:

count = 0

and we call:

setCount(1);

React schedules the state update and renders the component again with the updated state.

The browser does not perform a complete page refresh. React updates the necessary part of the UI.

State as a Snapshot

React treats state as a snapshot for each render. This means the value of a state variable belongs to the particular render in which it was read.

For example:

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

  function handleClick() {
    setCount(count + 1);
    console.log(count);
  }

  return <button onClick={handleClick}>{count}</button>;
}

If count is 0 in the current render, calling setCount(1) does not immediately change the count variable inside that same function execution. The current render still sees 0. React processes the update and provides 1 in the next render.

This concept is often described as state being a snapshot.

Functional State Updates

Sometimes the new state depends on the previous state. In such situations, we can use a functional updater:

setCount(prev => prev + 1);

Here, prev represents the state value React provides to the updater function.

For example:

setCount(prev => prev + 1);
setCount(prev => prev + 1);

If the initial value is 0, React processes the updates sequentially:

0 → 1 → 2

Therefore, the final value is 2.

The functional updater is especially useful when multiple updates depend on the previous state.

Array Destructuring in useState

The syntax:

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

uses JavaScript array destructuring.

The first value represents the current state, while the second value represents the setter function.

For example:

const [name, setName] = useState("");

Here:

name → current state value
setName → function used to update the state
"" → initial state value

The names can be changed depending on what the state represents.

Examples:

const [age, setAge] = useState(21);

const [name, setName] = useState("");

const [isLoggedIn, setIsLoggedIn] = useState(false);

useState with Input Fields

useState is commonly used with form inputs.

For example:

import { useState } from "react";

function App() {
  const [name, setName] = useState("");

  return (
    <>
      <input
        value={name}
        onChange={(event) => setName(event.target.value)}
      />

      <h2>Hello {name}</h2>
    </>
  );
}

When the user types something into the input, onChange runs.

event.target.value gives the current value of the input.

For example, if the user types:

Abi

then:

event.target.value

contains:

"Abi"

and:

setName(event.target.value);

updates the state.

The flow becomes:

User types
    ↓
onChange
    ↓
event.target.value
    ↓
setName()
    ↓
State changes
    ↓
Re-render
    ↓
UI updates

This pattern is commonly used in login forms, signup forms, search boxes, todo applications, and many other React applications.

Different Types of State

useState can store different types of JavaScript values.

Number

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

String

const [name, setName] = useState("");

Boolean

const [isLoggedIn, setIsLoggedIn] = useState(false);

Array

const [todos, setTodos] = useState([]);

Object

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

The type of state depends on what information the component needs to remember.

Why is useState Important?

Without state, creating interactive React applications would be much more difficult. useState allows components to respond to user actions and remember changing information.

For example, state can be used for:

Counter applications
Login forms
Signup forms
Todo lists
Search boxes
Dark mode
Dropdown menus
Like buttons
Shopping carts
Form validation

Conclusion

useState is one of the most important concepts for anyone learning React. It allows functional components to store values that can change over time and update the user interface when those values change.

The basic pattern is:

const [value, setValue] = useState(initialValue);

The key ideas to remember are:

useState()
    ↓
Creates state
    ↓
State has a current value
    ↓
Setter function updates the state
    ↓
React re-renders
    ↓
UI displays the updated state

Once you understand useState, concepts such as forms, event handling, conditional rendering, todo applications, and many other React features become much easier to understand.

Components in React

ABISHEK M — Tue, 29 Sep 2026 18:00:37 +0000

React is a JavaScript library used to build user interfaces for web applications. One of the most important concepts in React is the component. A component is a small, reusable part of a user interface. Instead of creating an entire application in one large file, React allows developers to divide the application into smaller components.

For example, a website can contain a Navbar, Sidebar, Button, Product Card, Login Form, and Footer. Each of these can be created as a separate component. These components can then be combined to create a complete web application.

A React component is commonly created using a JavaScript function. For example:

function Welcome() {
  return <h1>Welcome to React</h1>;
}

Here, Welcome is a component. It returns JSX that displays a heading on the webpage.

Components are useful because they are reusable. For example, if we create a Button component, we can use it multiple times in our application without writing the same code again.

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

We can use this component wherever we need:

<Button />
<Button />
<Button />

Another important feature is that components can be nested. One component can contain other components. For example, an App component can contain Navbar, MainContent, and Footer components.

Components also make applications easier to understand, maintain, debug, and scale. In real-world projects, developers usually organize components into separate files such as Navbar.jsx, ProductCard.jsx, and Footer.jsx.

Component names normally start with a capital letter, such as Navbar, ProductCard, and LoginForm. This helps React distinguish custom components from regular HTML elements.

In simple terms, a component is like a building block of a React application. Multiple small components can be combined to create a complete and powerful web application.

In short: React application = Collection of reusable components.

Virtual DOM in React

ABISHEK M — Sat, 26 Sep 2026 17:09:45 +0000

The Virtual DOM (Virtual Document Object Model) is one of the important concepts in React. It helps React efficiently manage changes in the user interface (UI).

What is DOM?

DOM stands for Document Object Model. When a browser loads an HTML page, it creates a tree-like structure representing the HTML elements. For example, a page containing a heading, paragraph, and button will have these elements represented in the DOM.

When the DOM is updated, the browser may need to perform various operations to display the changes on the screen. React provides a way to efficiently manage these UI updates using the Virtual DOM.

What is Virtual DOM?

The Virtual DOM is a lightweight JavaScript representation of the real DOM. React maintains this representation in memory.

When the data or state of a React component changes, React creates a new Virtual DOM representation. It then compares the new representation with the previous one to identify what has changed. This process is known as reconciliation.

After finding the changes, React updates the required parts of the real DOM instead of unnecessarily recreating the entire UI.

How Virtual DOM Works

The basic process is:

State/Data Change → New Virtual DOM → Compare with Previous Virtual DOM → Identify Changes → Update Real DOM

For example, suppose a counter displays:

<h1>Count: 0</h1>

After clicking a button, it becomes:

<h1>Count: 1</h1>

React identifies that only the displayed count has changed and updates the necessary part of the UI.

Real-World Example

Imagine a house with many rooms. If you want to change only a light bulb in one room, you don't need to rebuild the entire house. You only change that particular bulb.

Similarly, React uses its reconciliation process to determine which parts of the UI need to change.

Benefits of Virtual DOM

Helps React efficiently manage UI updates.
Makes UI development easier through declarative programming.
Reduces unnecessary DOM operations.
Works well with frequently changing interfaces.
Helps React manage complex applications.

Virtual DOM vs Real DOM

Real DOM	Virtual DOM
Represents the actual webpage	JavaScript representation of the UI
Managed by the browser	Managed by React
Directly affects the webpage	Used to determine required UI changes
DOM operations can be expensive	Helps React manage updates efficiently

Conclusion

The Virtual DOM is an important concept behind React's UI update mechanism. Instead of manually deciding which DOM elements should change, developers update the state, and React handles the process of determining and applying the necessary UI changes. Understanding the Virtual DOM also helps beginners understand concepts such as state, re-rendering, and reconciliation in React.

Difference Between Library and Framework

ABISHEK M — Fri, 25 Sep 2026 17:18:17 +0000

In software development, libraries and frameworks are both used to make application development easier. They provide ready-made code and tools, but the main difference is who controls the application flow.

What is a Library?

A library is a collection of reusable code that developers can use when needed. The developer decides when and where to use the library.

For example, React is primarily a JavaScript library for building user interfaces. React provides features such as components and state management, while developers can choose additional tools for routing, API communication, styling, and other requirements.

Example:

Your Application
       ↓
    React
       ↓
   UI Components

In simple words:

Library → You call the library.

What is a Framework?

A framework provides a more complete structure for developing an application. It usually defines conventions and controls more of the application's overall flow.

For example, Next.js is a React framework. It provides React along with additional application-level features and conventions.

Example:

Framework
    ↓
Your Application
    ↓
Your Code

In simple words:

Framework → The framework controls the application flow and calls your code.

This concept is commonly called Inversion of Control (IoC).

Library vs Framework

Library	Framework
Developer has more control	Framework provides more structure
Used when needed	Provides an overall application structure
Usually focuses on specific functionality	Usually covers broader application needs
Developer chooses additional tools	Framework often provides or recommends solutions
Example: React	Example: Next.js, Angular

Real-World Example

Imagine building a house.

A library is like having a collection of construction materials and tools. You decide what to use and how to build the house.

A framework is more like getting a predefined house structure. You still customize it, but you generally follow the structure and rules provided.

Easy Way to Remember

Remember this one line:

Library → You call it.
Framework → It calls your code.

For example:

React → Library
Next.js → React Framework

Understanding this difference is important for developers because it helps them choose the right technology based on the requirements of their application.

React – Introduction

ABISHEK M — Thu, 24 Sep 2026 16:39:23 +0000

What is React?

React is a JavaScript library used to build user interfaces (UI) for websites and web applications. It was created by Facebook and is now maintained by Meta and the open-source community. React helps developers create interactive and reusable UI components.

For example, a website like YouTube has many video cards. Instead of creating every video card separately, we can create one reusable component and display different video data such as the video image, title, channel name, and views.

Examples of applications built using React include Facebook, Instagram, Netflix, WhatsApp Web, and many other modern web applications.

Why Do We Use React?

We use React to make the development of modern and interactive web applications easier. In large applications, there are many UI elements and frequently changing data. React allows developers to divide the UI into small reusable components.

For example:

Navbar
Sidebar
VideoCard
Footer

These components can be created separately and combined to build a complete application.

When Should We Use React?

React is useful when we are building interactive and dynamic websites, especially applications where the content changes frequently based on user actions or data from an API.

Examples include shopping websites, dashboards, social media applications, and video platforms.

Features of React

Some important features of React are:

Component-based architecture – Build UI using reusable components.
JSX – Write HTML-like syntax inside JavaScript.
Reusable UI – The same component can be used with different data.
State management – Manage changing data in the UI.
Event handling – Respond to user actions such as clicks and typing.
API integration – Get data from backend APIs and display it.
Large ecosystem – Many libraries and tools are available for React.

Real-World Uses

React is commonly used for applications such as YouTube-like video platforms, e-commerce websites, social media applications, admin dashboards, booking systems, and many other interactive web applications.

Conclusion

React makes it easier to create reusable, organized, and interactive user interfaces. Its component-based approach allows developers to build large applications by combining smaller UI components.

Fetch API in JavaScript

ABISHEK M — Wed, 23 Sep 2026 17:13:45 +0000

The Fetch API is a built-in feature in JavaScript that is used to communicate with a server or an API. It helps us send requests to a server and receive data from it. Fetch API is commonly used in web applications to get products, users, posts, weather information, and other data.

The basic syntax of Fetch API is:

fetch("URL")

For example:

fetch("https://jsonplaceholder.typicode.com/posts")

Here, fetch() sends a request to the given URL.

When the server receives the request, it sends a response. We can handle this response using .then().

fetch("https://jsonplaceholder.typicode.com/posts")
  .then(response => {
    return response.json();
  })
  .then(data => {
    console.log(data);
  });

In this example, the first .then() receives the server response. The response.json() method is used to read the JSON data from the response. The second .then() receives the actual data, which is stored in the data variable.

The basic flow is:

fetch()
   ↓
Request
   ↓
Server
   ↓
Response
   ↓
response.json()
   ↓
Actual Data

Fetch API can also be used to send data to a server using methods such as POST, PUT, PATCH, and DELETE.

For example, a POST request can be written as:

fetch("https://example.com/users", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    name: "John",
    age: 25
  })
});

Fetch API is very useful in modern web development because it allows JavaScript applications to communicate with backend servers and APIs without reloading the entire webpage.

In simple words, Fetch API is a way for JavaScript to send requests to a server and receive or send data.

What is an API?

ABISHEK M — Mon, 21 Sep 2026 17:25:12 +0000

API stands for Application Programming Interface. It is a way that allows two different software applications to communicate and exchange data with each other.

To understand API easily, imagine a restaurant. A customer gives an order to the waiter, and the waiter takes the order to the kitchen. After the food is prepared, the waiter brings it back to the customer. In this example, the waiter works like an API because it connects the customer and the kitchen.

In web development, an API usually connects the frontend and backend. For example, when we open an online shopping website and view products, the frontend sends a request to the backend through an API. The backend processes the request, gets the required information from the database, and sends the response back through the API.

APIs commonly use HTTP methods such as GET, POST, PUT, and DELETE. GET is used to retrieve data, POST is used to create data, PUT is used to update data, and DELETE is used to remove data.

APIs often exchange data in JSON format, which is easy for applications to understand.

In modern applications, APIs are used everywhere, including websites, mobile applications, payment systems, weather applications, and social media platforms.

In simple words, an API acts as a bridge that allows different software systems to communicate with each other.

Events in JS

ABISHEK M — Sat, 19 Sep 2026 16:26:58 +0000

When we create a website, we don't want it to only show information. We also want the website to respond when the user does something.

For example:

Clicking a button
Typing something in a text box
Moving the mouse
Pressing a keyboard key
Submitting a form
Loading a web page

All these actions are called events in JavaScript.

What is an Event?

An event is an action that happens in a web browser and can be detected by JavaScript.

For example, suppose we have a button:

<button id="btn">Click Me</button>

When the user clicks this button, a click event occurs.

JavaScript can listen for this event and perform an action.

const button = document.getElementById("btn");

button.addEventListener("click", function() {
    console.log("Button was clicked!");
});

Here:

click → Event
addEventListener() → Used to listen for the event
function() → Runs when the event happens

So, events help JavaScript understand what is happening on the web page.

Why Do We Need Events?

Events are mainly used to make a website interactive.

For example, when we click a button, we can:

Display a message
Change the text
Change the color
Open or close a menu
Show or hide an element
Validate a form
Send data to a server
Add or remove HTML elements

For example:

const button = document.getElementById("btn");

button.addEventListener("click", function() {
    document.body.style.backgroundColor = "lightblue";
});

Now, whenever the user clicks the button, the background color of the page changes.

Common JavaScript Events

JavaScript provides many different events. Some commonly used events are:

Event	When it occurs
`click`	When the user clicks an element
`dblclick`	When the user double-clicks an element
`mouseover`	When the mouse moves over an element
`mouseout`	When the mouse leaves an element
`mousedown`	When a mouse button is pressed
`mouseup`	When a mouse button is released
`mousemove`	When the mouse pointer moves
`keydown`	When a keyboard key is pressed
`keyup`	When a keyboard key is released
`input`	When the value of an input changes
`change`	When the value of an input or select element changes
`submit`	When a form is submitted
`focus`	When an element gets focus
`blur`	When an element loses focus
`load`	When a page or resource finishes loading

Conclusion

Events are an important part of JavaScript because they allow web pages to respond to user actions. Actions like clicking, typing, moving the mouse, and submitting forms can all generate events.

By using addEventListener(), we can listen for these events and execute JavaScript code when they occur.

Understanding events is an important step for beginners because interactive features such as buttons, forms, menus, popups, and search boxes commonly depend on JavaScript events.

Garbage Collector in JavaScript

ABISHEK M — Fri, 18 Sep 2026 17:03:16 +0000

When we write JavaScript programs, we create variables, objects, arrays, and other values that need memory to store their data. As the program runs, some of these values may no longer be needed. JavaScript has a built-in mechanism called the Garbage Collector that automatically manages this unused memory.

What is Garbage Collection?

Garbage Collection is the process of finding and removing data from memory that is no longer reachable or needed by the program.

For example:

let user = {
    name: "Abishek"
};

user = null;

Initially, the user variable refers to an object. When we assign null to user, there is no longer a reference from user to that object. If no other reference points to the object, it becomes eligible for garbage collection.

The Garbage Collector can then remove that object from memory.

Why is Garbage Collection Needed?

Without proper memory management, unused data could remain in memory and consume resources. This can cause a memory leak, which may make an application slower or eventually cause performance problems.

Garbage Collection helps by automatically freeing memory occupied by objects that are no longer reachable.

How Does It Work?

JavaScript engines commonly use a concept called reachability. An object is considered reachable if the program can still access it through variables or references.

For example:

let person = {
    name: "Arun"
};

person = null;

After person becomes null, the object may no longer be reachable. The Garbage Collector identifies such objects and eventually frees their memory.

Advantages

Automatically manages memory
Reduces the need for manual memory management
Helps prevent unnecessary memory usage
Makes JavaScript development easier

Conclusion

The Garbage Collector is an important part of JavaScript's memory management system. Developers do not normally need to manually delete unused objects. Instead, the JavaScript engine identifies objects that are no longer reachable and automatically reclaims their memory. Understanding Garbage Collection helps developers write more efficient and reliable JavaScript applications.

DEV Community: ABISHEK M

useEffect in React

What is useEffect?

What is a Side Effect?

Dependency Array

1. Without a Dependency Array

2. Empty Dependency Array

3. With Dependencies

useState and useEffect

Cleanup Function

Real-World Example

Important Rules to Remember

Conclusion

Prop Drilling in React

Props in React – Introduction

What are Props?

How Props Work

Why Do We Use Props?

Props are Read-Only

Real-World Example

Props vs State

Conclusion

useState in React

What is useState?

Importing useState

Understanding State and Setter Function

Example: Counter

What is Re-rendering?

State as a Snapshot

Functional State Updates

Array Destructuring in useState

useState with Input Fields

Different Types of State

Number

String

Boolean

Array

Object

Why is useState Important?

Conclusion

Components in React

Virtual DOM in React

What is DOM?

What is Virtual DOM?

How Virtual DOM Works

Real-World Example

Benefits of Virtual DOM

Virtual DOM vs Real DOM

Conclusion

Difference Between Library and Framework

What is a Library?

What is a Framework?

Library vs Framework

Real-World Example

Easy Way to Remember

React – Introduction

What is React?

Why Do We Use React?

When Should We Use React?

Features of React

Real-World Uses

Conclusion

Fetch API in JavaScript

What is an API?

Events in JS

What is an Event?

Why Do We Need Events?

Common JavaScript Events

Conclusion

Garbage Collector in JavaScript

What is Garbage Collection?

Why is Garbage Collection Needed?

How Does It Work?

Advantages

Conclusion

What is `useEffect`?

`useState` and `useEffect`