Forem: Shubha Khadgi

JS Series 1: What Is Hoisting in JavaScript?

Shubha Khadgi — Tue, 03 Jun 2025 14:52:15 +0000

I used to hear people say, “JavaScript hoists variables and functions,” and honestly... it just made things more confusing.

But once I saw it in action, it finally clicked.

In this blog, I’ll explain what hoisting really means, how it works under the hood, and how it might trip you up during interviews.

What is Hoisting?
Examples
- Example 1: Hoisting with var
- Example 2: Using an Undeclared Variable
- Example 3: Function Declarations Are Fully Hoisted
- Example 4: Arrow Functions Are NOT Hoisted
Note: let and const Are NOT Like var
Practice Question: What’s the Output?
Final Takeaways
Want More?

What is Hoisting?

Hoisting is JavaScript’s way of reading your code before it actually runs it.

At the start of your program, JavaScript does a quick scan and sets aside space in memory for all the variables and functions you’ve declared.

For variables declared with var, it assigns them undefined.
For function declarations (function keyword), it stores the entire function, so it can be called before it's written in the code.

This behind-the-scenes setup is called hoisting.

Examples

Example 1: Hoisting with `var`

console.log(name); 
var name = "John";

Output:

undefined

JavaScript sees this code like:

var name;
console.log(name); // undefined
name = "John";

Example 2: Using an Undeclared Variable

console.log(age); 
var name = "John";

Output:

ReferenceError: age is not defined

Why? Because age was never declared, so no memory was allocated for it during the initial scan.

Example 3: Function Declarations Are Fully Hoisted

sayHello();

function sayHello() {
  console.log("Hello!");
}

Output:

Hello!

The whole function is hoisted to the top.

Example 4: Arrow Functions Are NOT Hoisted

greet(); // ❌ TypeError: greet is not a function

var greet = () => {
  console.log("Hi there!");
};

Even though greet is declared with var, arrow functions behave like variables—not like hoisted function declarations.

Note: let and const Are NOT Like var

console.log(age); // ❌ ReferenceError

let age = 25;

Why does this throw an error even though age is declared?

Because of something called the Temporal Dead Zone (TDZ).

“Yeah, I know age exists, but you can’t touch it until I actually reach the line where it’s defined.”

So unlike var, JavaScript doesn’t give let and const a placeholder value like undefined. You’ll get a ReferenceError if you try to use them too early.

Practice Question: What’s the Output?

var x = 10;
function test() {
  console.log(x);
  var x = 20;
}
test();

Answer:

undefined

Even though x = 10 exists globally, inside the test function, there's a new local var x. It’s hoisted to the top with a value of undefined—until it's later assigned 20.

Wanna Connect?

You can find me at:

React Interview Prep Guide 1: Core Concepts Made Easy

Shubha Khadgi — Tue, 22 Apr 2025 01:01:14 +0000

Preparing for a React interview and not sure where to start? This guide walks you through the must-know core concepts — from JSX to Hooks — in a simple, clear way.

We’ll start with the React fundamentals and move step by step into other important topics. For this article we have:

📚 Table of Contents

JSX and Babel
Components: Functional vs Class
Props and PropTypes
State and Lifecycle
Conditional Rendering
Lists and Keys

1. JSX and Babel

What is JSX?

JSX lets you write HTML-like code inside JavaScript. It looks like HTML, but it's really JavaScript.

Why It’s Useful:

You don’t need to separate your HTML and JS into different files.
You can easily build UI components that show and update data dynamically.

Example:

const element = <h1>Hello, React</h1>;

This looks like HTML, but it's JSX — and React understands how to handle it.

What happens to JSX behind the scenes?

JSX doesn't run in the browser directly. React apps use Babel to convert JSX into regular JavaScript.

Behind the scenes, the code above becomes this:

const element = React.createElement('h1', null, 'Hello, React');

What is Babel and why do we need it?

Babel is a tool that translates JSX and modern JavaScript (like ES6) into plain JavaScript (ES5) that browsers can understand.

Why Babel is critical:

Browsers don’t understand JSX.
Some older browsers don’t support the latest JavaScript syntax.
Babel ensures that all your React code (JSX + modern JS) works everywhere.

2. Components: Functional vs Class

In React, components are the core building blocks of your UI. Whether it's a button, a navbar, or an entire page — it's all just components.

There are two main ways to write them:

Functional Components — the modern, preferred way
Class Components — the older, legacy style

Functional Components

A functional component is just a JavaScript function that returns JSX. It’s simple, clean, and easy to test.

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

Why they’re great:

Require less boilerplate
Easier to read and maintain
You can use React Hooks to manage state, side effects, and context

Hooks Example:

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    console.log('Component mounted or count changed:', count);
  }, [count]);

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

Class Components

Before hooks came around (React 16.8), this was the only way to use state and lifecycle methods.

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidUpdate() {
    console.log('Component updated');
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increase
        </button>
      </div>
    );
  }
}

3. Props and PropTypes

Props (short for "properties") are how data flows from a parent component to a child component in React. Think of them like function arguments — they allow you to pass data and callbacks around to keep your components reusable and dynamic.

What Are Props?

Props are immutable that cannot be altered and can be anything: strings, numbers, functions, arrays, or even other components.

Example of Passing Props:

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

function App() {
  return <Greeting name="John" />;
}

In the example above:

The App component passes a name prop to the Greeting component.
The Greeting component receives the prop and displays the name.

PropTypes: Type Checking in React

PropTypes is a React utility that helps with validating the types of props passed into a component. This is useful to catch errors during development.

Why Use PropTypes?

Ensures the correct type of data is passed to components.
Helps document components and provides self-checks.

Example of PropTypes:

import PropTypes from 'prop-types';

function Greeting({ name, age }) {
  return <h1>Hello, {name}. You are {age} years old!</h1>;
}

Greeting.propTypes = {
  name: PropTypes.string.isRequired,  // Name must be a string and required
  age: PropTypes.number.isRequired,  // Age must be a number and required
};

function App() {
  return <Greeting name="John" age={30} />;
}

In the example above:

The Greeting component expects two props: name (a string) and age (a number).
If you pass an incorrect type or forget to pass a required prop, React will show a warning in the console during development.

Why PropTypes Matter

Development-Time Safety: PropTypes help catch bugs early by validating the types and presence of props.
Better Documentation: PropTypes serve as documentation for other developers.
Debugging: If you pass incorrect or missing props, React will warn you with clear error messages.

Major Takeaways

Props allow you to pass data between components.
PropTypes provide a way to check if props are correctly passed with the right data type.

Both make React components more robust, readable, and easier to debug.

4. State and Lifecycle

In React, state is how a component manages and stores data that can change over time. State can be thought of as a local memory for a component. When the state changes, the component re-renders, reflecting the new data.

The lifecycle refers to the series of methods that get called at specific points in a component's existence, like when it's first created, updated, or destroyed. Understanding the lifecycle is key to building efficient React apps.

What is State?

State allows components to hold dynamic data that can change based on user actions or events.

Example of Using State:

import { useState } from 'react';

function DevModeToggle() {
  const [isDevMode, setIsDevMode] = useState(false);

  return (
    <div>
      <button onClick={() => setIsDevMode(!isDevMode)}>
        {isDevMode ? 'Disable Dev Mode' : 'Enable Dev Mode'}
      </button>
      {isDevMode && <p>Developer mode is ON</p>}
    </div>
  );
}

In this example:

useState is a hook that creates a state variable.
isDevMode holds the current state (true or false), and setIsDevMode is the function used to update it.
Clicking the button toggles the state between enabled and disabled, showing conditional content based on that state.

Why is State Important?

Dynamic data: It allows components to react to changes, making the UI interactive.
Encapsulation: State is local to the component, meaning other components can’t directly modify it (unless you pass data down as props)

The Lifecycle Methods (Class Components)

In class components, React provides lifecycle methods that let you hook into key moments of a component’s life. Here are the main ones:

componentDidMount(): Called once when the component is first rendered.
componentDidUpdate(): Called when the component is re-rendered due to state or props change.
componentWillUnmount(): Called right before the component is removed from the DOM.

Example of Lifecycle Methods in Class Components:

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    console.log('Component mounted');
  }

  componentDidUpdate() {
    console.log('Component updated');
  }

  componentWillUnmount() {
    console.log('Component will unmount');
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increase</button>
      </div>
    );
  }
}

In this example:

componentDidMount() runs once when the component is mounted.
componentDidUpdate() runs when the state changes.
componentWillUnmount() runs just before the component is removed.

The Lifecycle with Hooks (Functional Components)

With React 16.8 and hooks, functional components gained the ability to manage state and lifecycle events without using classes.

The most common hooks are:

useState for state management.
useEffect for lifecycle-like behavior.

Example with useEffect:

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    console.log('Component mounted or updated');
  }, [count]); // Dependency array - runs when count changes

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

In this example:

useEffect acts like both componentDidMount and componentDidUpdate. It runs when the component mounts and every time count changes.

Why useEffect Is Great:

Combines multiple lifecycle methods into one.
Handles side effects like fetching data, subscribing to events, and manual DOM manipulations.

Key Takeaways

State is how components store dynamic data that can change over time.
Lifecycle methods allow you to run code at specific times in a component’s life (e.g., mounting, updating, unmounting).
With hooks (useState, useEffect), functional components can handle state and lifecycle events, simplifying code.

5. Conditional Rendering

In React, you’ll often need to render certain parts of the UI conditionally based on the state, props, or user interactions. Conditional rendering allows you to create dynamic UIs where elements show up only when necessary.

React provides several ways to handle conditional rendering, including if-else statements, ternary operators, logical AND (&&), and switch-case statements.

Conditional Rendering with if Statements

You can use the standard JavaScript if statement to render different components or elements based on a condition.

Example:

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please log in.</h1>;
  }
}

function App() {
  const isLoggedIn = true;
  return <Greeting isLoggedIn={isLoggedIn} />;
}

In this example:

The Greeting component checks the isLoggedIn prop and renders different messages based on its value.

Conditional Rendering with Ternary Operator

For simpler conditionals, the ternary operator (? :) is often a more compact solution. This operator is like a shorthand if-else statement.

Example:

function Greeting({ isLoggedIn }) {
  return (
    <h1>{isLoggedIn ? 'Welcome back!' : 'Please log in.'}</h1>
  );
}

function App() {
  const isLoggedIn = true;
  return <Greeting isLoggedIn={isLoggedIn} />;
}

Here:

The Greeting component uses the ternary operator to decide which message to display.

Conditional Rendering with Logical AND (&&)

Another common way to render a component conditionally is using the logical AND operator (&&). This works well when you want to render something only when a condition is true.

Example:

function Profile({ user }) {
  return (
    <div>
      {user.isLoggedIn && <h1>Welcome, {user.name}!</h1>}
    </div>
  );
}

function App() {
  const user = { isLoggedIn: true, name: 'John' };
  return <Profile user={user} />;
}

In this example:

The Profile component only renders the if user.isLoggedIn is true.

Conditional Rendering with Switch Statements

For more complex conditions or when you have multiple cases to check, you might prefer using a switch statement.

Example:

function Greeting({ status }) {
  switch (status) {
    case 'loggedIn':
      return <h1>Welcome back!</h1>;
    case 'guest':
      return <h1>Guest, please sign up!</h1>;
    case 'banned':
      return <h1>Sorry, you've been banned.</h1>;
    default:
      return <h1>Unknown status</h1>;
  }
}

function App() {
  const status = 'loggedIn';
  return <Greeting status={status} />;
}

Here:

The Greeting component uses a switch statement to render different messages based on the status prop.

Summary of Conditional Rendering Patterns

Method	Description	Example Usage
if statement	Use when rendering multiple elements based on a condition.	Showing a login message based on authentication.
Ternary operator	Shorthand for if-else, best for simple conditions.	Conditionally showing text or components.
Logical &&	Renders something only when the condition is true.	Showing a greeting if the user is logged in.
switch statement	Use for multiple conditions.	Handling different user statuses.

Key Takeaways

Conditional rendering lets you display components based on conditions.
Use if, ternary operators, &&, or switch statements to control what gets rendered.
It’s essential for building dynamic UIs where content changes based on user interaction or data.

6. Lists and Keys

When working with React, lists are a common feature. Whether you're displaying multiple items from an array or dynamically rendering a set of components, React provides an efficient way to work with lists. However, when rendering lists, React needs to know how to track each element for updates, which is where keys come into play.

Why Lists Are Important in React

React allows you to render lists of data by mapping over an array and returning components. Each element in the list can then be uniquely identified and updated when necessary.

Example of Rendering a List:

const items = ['Apple', 'Banana', 'Cherry'];

function FruitList() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

In this example:

The map() function iterates over the items array and renders each item inside an
element.
A key (key={index}) is assigned to each
to help React track and efficiently re-render the list items when the data changes.

The Role of key in Lists

In React, keys help React identify which items have changed, been added, or been removed. This is crucial for performance, as it helps React minimize re-rendering operations. Keys should be unique and stable for each item in the list.

Why Keys Are Important:

Performance: Helps React quickly identify what needs to change.
Predictability: Without keys, React might get confused, especially if the list changes order, and end up re-rendering unnecessary elements.

Best Practices for Keys:

Use a unique and stable value (like an ID from a database or a unique string) instead of using the index, if possible.
Avoid using indexes as keys if the list can change dynamically (e.g., adding, removing, or reordering items), because it can cause React to mismanage the component state.

Example of Lists with Stable Keys:

const users = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Doe' }
];

function UserList() {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

In this example:

The id from the users array is used as a stable and unique key for each
.
This ensures React handles updates correctly, even if the list changes.

Performance Optimization with Lists and Keys

React optimizes the process of updating the DOM by using keys to identify each element uniquely. When you modify a list (e.g., adding, removing, or rearranging elements), React will only update the specific items that changed rather than re-rendering the entire list.

Example of List with Dynamic Updates:

const [items, setItems] = useState(['Apple', 'Banana', 'Cherry']);

function addItem() {
  setItems([...items, 'Orange']);
}

function removeItem(index) {
  setItems(items.filter((_, i) => i !== index));
}

function ItemList() {
  return (
    <div>
      <ul>
        {items.map((item, index) => (
          <li key={index}>
            {item} <button onClick={() => removeItem(index)}>Delete</button>
          </li>
        ))}
      </ul>
      <button onClick={addItem}>Add Item</button>
    </div>
  );
}

In this example:

The list of items can be dynamically updated by adding or removing items.
React efficiently updates the DOM only for the elements that change, improving performance.

Key Takeaways

Lists in React can be rendered by mapping over an array of data and returning components.
Keys help React track list items for efficient re-rendering.
Always use unique and stable keys for list items to prevent unnecessary re-renders and bugs.

Let’s Connect

If you found this helpful, check out my other posts on React hooks like useEffect, useState, and more.

I’m sharing beginner-friendly content to help you build a solid foundation — step by step.

You can also find me here:

Mastering React Hooks as a beginner - useCallback()

Shubha Khadgi — Fri, 18 Apr 2025 09:21:37 +0000

useCallback is a hook that helps you memoize a function so that it is not re-created on every render, improving performance, especially in child components that rely on props.

In React, passing functions down to child components can cause unnecessary re-renders. This is where useCallback comes in to prevent re-creating the same function on each render, optimizing performance.

Syntax

const memoizedCallback = useCallback(() => {
  // function logic
}, [dependencies]);

The first argument is the function you want to memoize.
The second is the dependency array — the function will only be re-created if one of these dependencies changes.

Example

Let's see what useCallback can solve — live in action!

Here’s a simple component where a button click triggers a function:

import React, { useState } from 'react';

const Child = ({ handleClick }) => {
  console.log("Child re-rendered");
  return <button onClick={handleClick}>Click me</button>;
};

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

  const handleClick = () => {
    console.log("Button clicked");
    setCount(count + 1);
  };

  return (
    <div>
      <Child handleClick={handleClick} />
      <p>Count: {count}</p>
    </div>
  );
};

Can you spot the issue here?

Every time the Parent component re-renders (for example, when count changes), the handleClick function is re-created, even if its logic doesn’t change. This causes the Child component to re-render unnecessarily.

Now, let’s fix that by using useCallback:

import React, { useState, useCallback } from 'react';

const Child = ({ handleClick }) => {
  console.log("Child re-rendered");
  return <button onClick={handleClick}>Click me</button>;
};

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

  const handleClick = useCallback(() => {
    console.log("Button clicked");
    setCount(count + 1);
  }, [count]); // Only re-create the function if `count` changes

  return (
    <div>
      <Child handleClick={handleClick} />
      <p>Count: {count}</p>
    </div>
  );
};

How Does it Help?

By using useCallback, React will memoize the handleClick function, meaning it won’t be re-created on each render unless count changes. This prevents unnecessary re-renders of the Child component and optimizes performance.

Complete Code:

import React, { useState, useCallback } from 'react';

const Child = ({ handleClick }) => {
  console.log("Child re-rendered");
  return <button onClick={handleClick}>Click me</button>;
};

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

  const handleClick = useCallback(() => {
    console.log("Button clicked");
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <Child handleClick={handleClick} />
      <p>Count: {count}</p>
    </div>
  );
};

When Should You Use `useCallback`?

When passing functions to child components that trigger re-renders.
When you want to prevent re-creating functions unnecessarily.
When functions are part of a list or passed to deeply nested components.

When Shouldn't You Use `useCallback`?

Don’t overuse useCallback if your function doesn’t affect performance. If your function runs fast and doesn't cause re-renders, useCallback might add unnecessary complexity.
Avoid using it when the dependency array changes frequently, as it defeats the purpose of memoization.

Comparing `useCallback` with Similar Hooks

There are a few hooks in React that developers tend to confuse with each other, especially when it comes to performance optimizations. Here's a breakdown:

useMemo vs useCallback

Both useMemo and useCallback are used for memoization, but they apply to different types of data:

useMemo is used to memoize values that are the result of a function, like calculations or processed data.

Example:

  const filteredData = useMemo(() => expensiveCalculation(data), [data]);

useCallback is used to memoize functions. It’s useful when you need to pass a stable reference to a function to child components, preventing unnecessary re-renders.

Example:

  const memoizedCallback = useCallback(() => doSomething(value), [value]);

useEffect vs useCallback

useEffect and useCallback are quite different in terms of functionality:

useEffect is used for side effects, such as fetching data, subscribing to an event, or modifying the DOM. It runs after the render.

Example:

  useEffect(() => {
    fetchData();
  }, [query]);

useCallback, on the other hand, is specifically for memoizing functions. It’s used when you want to keep a reference to a function across re-renders without it changing unless its dependencies change.

useMemo vs useEffect

Both useMemo and useEffect can be used for optimizing performance, but their use cases are quite different:

useMemo is for values that are expensive to calculate, but only need to be recalculated when specific dependencies change.

Example:

  const expensiveValue = useMemo(() => complexCalculation(data), [data]);

useEffect is for running side effects after a render, which could include things like fetching data or manually changing the DOM.

Example:

  useEffect(() => {
    console.log("Component rendered");
  }, []);

Summary

Use useMemo when you need to memoize values or complex calculations to avoid redundant re-renders.
Use useCallback when you need to prevent the re-creation of functions between renders.
Use useEffect for handling side effects in your components, like fetching data or setting up subscriptions.

Remember, it’s crucial not to overuse these hooks. While they help with performance, they also add complexity to your code. Always consider the actual impact of your changes on performance before implementing them.

useRef Hook: The Silent Helper

Shubha Khadgi — Thu, 10 Apr 2025 08:08:20 +0000

useRef is a hook that gives you a way to persist values across renders without triggering re-renders.

It's like storing a value you can access at any point — but React won’t re-render when that value changes.

Why Use `useRef`?

You should use useRef when you need to:

Store data that shouldn’t cause a re-render (e.g., timer ID, previous value)
Access or manipulate DOM elements directly (like focusing an input or scrolling)

How Does `useRef` Work?

When you use useRef, you get an object with a .current property that holds your value.

It’s like a hidden box React ignores during re-renders — perfect for non-UI logic.

const myRef = useRef(initialValue);

initialValue: The starting value to store
myRef.current: Access or update this anytime without re-rendering

Example: Storing a Timer ID

Use useRef to store a timer ID without triggering a re-render.

const timerRef = useRef(null);

const startTimer = () => {
  timerRef.current = setInterval(() => console.log("Tick..."), 1000);
};

const stopTimer = () => {
  clearInterval(timerRef.current);
};

Example: Focusing an Input Field

Use useRef to control a DOM element — like focusing an input — without re-rendering.

const inputRef = useRef(null);

const focusInput = () => {
  inputRef.current.focus();
};

return (
  <>
    <input ref={inputRef} />
    <button onClick={focusInput}>Focus</button>
  </>
);

When Not to Use `useRef`

Don’t reach for useRef in every situation. It’s not always the right fit:

Need UI to react to value change? → Use useState
Need side effects or tracking changes? → Use useEffect or useMemo

useRef is great for holding values silently, but it's not reactive.

Real-World Use Case

You're building a form and want to auto-focus the first input that’s empty.

You don’t want to trigger a re-render — just focus it once on load.

useRef is perfect here.

Other use cases:

Storing debounce or interval IDs
Holding scroll position
Keeping a reference to video/audio players

Try It Yourself!

Challenge:

Create a countdown timer that starts and stops using useRef.

Hint:

Use setInterval() and clearInterval()
Store the interval ID using useRef

Let’s Connect

If you found this helpful, check out my other posts on React hooks like useEffect, useState, and more.

I’m sharing beginner-friendly content to help you build a solid foundation — step by step.

You can also find me here:

The Power of React: Why It’s More Than Just Components

Shubha Khadgi — Wed, 09 Apr 2025 09:07:47 +0000

React is everywhere. Developers rave about it, but what makes it so special? If you've only heard of React as a library for building user interfaces, you're missing out.

Sure, it’s a collection of tools to make UIs easier, but React is way more than just components.

Let’s dive in and see why.

Wait, What's a "Library"?

A library is simply a collection of reusable code that helps you solve common problems without reinventing the wheel.

React is a JavaScript library, but instead of just handing you a bunch of utility functions, it gives you a framework for building entire applications!

The Magic of Declarative Programming

Traditionally, web developers had to manually tell the browser how to update the UI—step by step. It was imperative and messy.

React flips the script with declarative programming. You tell React what your UI should look like, and it handles the how. React updates only the parts of the UI that need changing, making things faster and smoother.

Components: More Than Just Lego Blocks

Yes, React is all about components.

But here’s the twist: it’s not just about building UI pieces like buttons or forms. It’s about thinking in terms of small, reusable chunks of functionality.

Components make your code cleaner, easier to debug, and more modular. You can think of them like Lego pieces—you can mix and match them to create anything you want.

With components, you can easily manage the state and behavior of different parts of your app. Each one is self-contained, which makes your app easier to scale and maintain.

React’s Superpower: The Virtual DOM

React introduces the concept of a Virtual DOM—an in-memory representation of the actual DOM.

Instead of making updates directly to the browser’s DOM (which can be slow), React compares the Virtual DOM with the real one and only updates the parts that changed. This results in faster, more efficient rendering. It's like a backstage crew that works tirelessly to keep the show running smoothly.

Beyond UI: React's Ecosystem

React started as a tool for UI development, but it’s grown into much more. With tools like React Router for navigation, React Query for data fetching, and React Native for mobile apps.

React is a one-stop shop for building modern, scalable applications. It’s not just a UI library—it’s an entire ecosystem that makes building complex applications simpler and faster.

Why React Rocks

React is all about simplicity and performance. The declarative nature, component-based architecture, and the Virtual DOM allow developers to create complex apps without getting bogged down in the details. It’s flexible, scalable, and—most importantly—fun to use.

So, next time someone says React is just about components, remember: it’s about a new way of building apps. React has redefined how we think about web development—by focusing on declarative programming, reusable components, and performance optimization. It’s more than just a library; it’s a powerful toolkit that’s changed the game for developers everywhere.

Wanna Connect?

You can find me at:

What is JSX and Why Do We Use It in React?

Shubha Khadgi — Wed, 09 Apr 2025 08:45:56 +0000

When you first see JSX, you might think it’s just a fancy way of writing HTML, but there's more to it. In this post, we’ll dive into the magic behind JSX, break it down, and explain why it’s so crucial for building React applications.

How Does JSX Work Under the Hood?

JSX might look like regular HTML, but it’s actually JavaScript. Before React can use JSX in your app, it needs to be compiled into something React can understand.

That’s where Babel comes in! Babel transforms JSX into React.createElement calls, which are JavaScript functions that generate actual DOM elements.

Here’s an example of what’s going on:

const element = <h1>Hello, World!</h1>;

Babel transforms it into:

const element = React.createElement('h1', null, 'Hello, World!');

Why Do We Use JSX in React?

Here’s why JSX isn’t just a nice-to-have, but an essential tool for every React developer:

1. A Seamless Blend of HTML and JavaScript

JSX allows you to write HTML-like syntax directly within JavaScript. It’s like having the best of both worlds — you get the structure and readability of HTML with the power and flexibility of JavaScript.

const name = 'Alice';
return <h1>Hello, {name}!</h1>;

2. Cleaner, More Readable Code

Instead of dealing with multiple layers of function calls or long-winded DOM manipulation, JSX lets you describe the UI directly in a syntax that's easy to understand — making your code more concise and readable.

// without JSX
const element = React.createElement('h1', null, 'Hello, World!');
return element;

// with JSX
return <h1>Hello, World!</h1>;

3. Built-In Security

One of the often overlooked benefits of JSX is its built-in protection against XSS (Cross-Site Scripting) attacks. React automatically escapes user input to ensure that malicious code can’t be executed, making your app more secure without any extra work on your part.

const userInput = '<script>alert("Hacked!")</script>';
return <div>{userInput}</div>;

4. Improved Developer Experience

JSX makes life easier for developers. The clear syntax allows for faster development and easier debugging, while also providing a smoother integration with tools like syntax highlighting and React DevTools.

Now that you’ve got a solid grasp on how it works, I’m sure you’ll appreciate how much it simplifies your React projects. Happy coding!

Mastering React Hooks as a beginner - useMemo()

Shubha Khadgi — Tue, 08 Apr 2025 08:58:52 +0000

`useMemo` – Memoizing in React

useMemo is a hook that helps you memoize the result of a function so React doesn’t have to recalculate it unless necessary.
In development, memoizing is an optimization technique where the result of a function is cached so it doesn’t have to be recalculated every time.

Syntax

const memoizedValue = useMemo(() => computeSomething(input), [input]);

The first argument is a function that returns the value you want to memoize.
The second is an array of dependencies — the memoized value will only update if one of these changes.

Example

Want to see what useMemo actually fixes — live in action?
Here's a snippet without it:

const filteredFruits = fruits.filter(fruit => {
  console.log("Filtering...");
  return fruit.includes(query);
});

Can you spot the issue?
Even though this works fine, there's a performance problem hiding underneath.

Every time any part of the component re-renders — even if it's unrelated to query — this filter() function runs again. That means:

Unnecessary recalculations
Wasted CPU cycles
Slower performance in large lists

const filteredFruits = useMemo(() => {
  console.log("Filtering...");
  return fruits.filter(fruit => fruit.includes(query));
}, [query]);

Now, the filter() logic only runs when query changes.

No more repeated filtering on every render — just efficient, optimized behavior.

This small change makes a huge difference in performance, especially as your app grows.

The filteredFruits value only updates when query changes.
If you type in the input, it filters. But if you click other buttons in the app (not shown), it won't redo the filter.

Complete Code:

import React, { useState, useMemo } from 'react';

const fruits = ["Apple", "Banana", "Orange", "Mango", "Pineapple"];

function FruitSearch() {
  const [query, setQuery] = useState("");

  const filteredFruits = useMemo(() => {
    console.log("Filtering fruits...");
    return fruits.filter(fruit =>
      fruit.toLowerCase().includes(query.toLowerCase())
    );
  }, [query]);

  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search fruits"
      />
      <ul>
        {filteredFruits.map(fruit => <li key={fruit}>{fruit}</li>)}
      </ul>
    </div>
  );
}

When Should You Use `useMemo`?

If you have heavy calculations.
When rendering large lists that depend on props or state.
When child components re-render unnecessarily due to props.

When You Should'nt?

Don’t just sprinkle useMemo everywhere. It adds some overhead too. If your function is fast and your app is snappy — you probably don’t need it.

Mastering React Hooks as a beginner - useState()

Shubha Khadgi — Tue, 08 Apr 2025 07:12:14 +0000

`useState` – Managing State in React

Think of state like the memory of your app — it remembers what’s happening right now.

For example, imagine you're filling out a form:

You type your name — the app remembers what you typed (that's state).

You check a box — the app knows it’s checked (also state).

You click “Submit” — the app knows the form is being submitted (again, state).

State updates every time something changes in your app, and React uses that info to re-render the screen with the latest changes.

Syntax

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

Toggle Between Light and Dark Mode

You’ve probably seen websites with a button that lets you switch between light and dark themes, right? Let's try to make that.

import React, { useState } from 'react';
import './App.css'; // This is where we define the styles for light and dark modes

function ThemeSwitcher() {
  const [isDarkMode, setIsDarkMode] = useState(false); // Start in light mode (false)

  // Function to toggle between light and dark modes
  const toggleTheme = () => {
    setIsDarkMode(!isDarkMode);  // Toggle the state
  };

  return (
    <div className={isDarkMode ? 'dark-mode' : 'light-mode'}>
      <h1>{isDarkMode ? 'Dark Mode' : 'Light Mode'}</h1>
      <button onClick={toggleTheme}>
        Switch to {isDarkMode ? 'Light Mode' : 'Dark Mode'}
      </button>
    </div>
  );
}

export default ThemeSwitcher;

Tips for better optimization

Use Previous State for Updates

If the new state depends on the old state, always pass a function to setState

setCount(prevCount => prevCount + 1);

Lazy Initialization

For expensive initial states, use a function to initialize state.

const [count, setCount] = useState(() => calculateInitialState());

Alright, that’s pretty much it for useState. Nothing too crazy, right? You’ve seen how to use it, toggle some themes, and even picked up a few tips for writing cleaner code.

Mastering React Hooks as a beginner - useEffect()

Shubha Khadgi — Tue, 08 Apr 2025 04:44:49 +0000

As a beginner, you might find them a bit tricky, especially when you're trying to understand the underlying principles. But don’t worry! We're going to decode each hook in an easy-to-understand way, with fun examples so you’ll never forget them. Let’s dive into the magic of hooks!

useEffect() – Side Effects? What Are They?

You’ve probably heard this one a lot: “useEffect is used to handle side effects.” But what does that even mean? What are side effects? It’s kind of like asking, “What’s for dinner?” and someone replying, “Food.” Sure, but what kind of food? Let’s break it down.

What are Side Effects?

In React, side effects are any actions that happen outside of the normal React rendering process. These are things that can affect the outside world, like:

Fetching data from an API
Updating the DOM directly
Subscribing to a service (like WebSocket or events)
Setting up timers (setTimeout, setInterval)

So basically, side effects are things your code does that React doesn’t directly manage, but which affect the UI or other parts of the app.

useEffect(() => {
  // Here is where the magic happens
}, [dependencies])

The useEffect hook accepts two parameters:

A function that contains your side effect logic.
A dependencies array that tells React when the effect should run.

Example: Fetching Data

Imagine you’re building a dashboard, and you need to fetch data from a server when the component mounts. Here’s how you can do that using useEffect.

import React, { useState, useEffect } from 'react';

function Dashboard() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/dashboard-data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);  // The empty array means this effect runs only once (like componentDidMount)

  return data ? <div>{JSON.stringify(data)}</div> : <p>Loading...</p>;
}

export default Dashboard;

Dependencies: The Secret Sauce

The second argument, the dependencies array, controls when the effect should re-run. If you want it to run only once when the component mounts, you pass an empty array ([]), as shown above. If you want it to run whenever a certain variable changes, you can pass that variable inside the array.

Example: Updating on Data Change

useEffect(() => {
  console.log("Data has changed:", data);
}, [data]);  // Runs every time `data` changes

The Cleanup Function – The Cleanup Crew

But wait! There's more. What if your component is removed from the UI and you need to clean up some resources, like cancelling a network request or clearing a timer? That’s where the cleanup function comes in.

The cleanup function runs when your component is about to be removed from the DOM or when the effect is about to run again (i.e., when a dependency changes).

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

  // Cleanup: This will clear the timer when the component unmounts
  return () => {
    clearInterval(timer);
  };
}, []); // Empty dependency array means this effect only runs once

Forem: Shubha Khadgi

JS Series 1: What Is Hoisting in JavaScript?

Table of Contents

What is Hoisting?

Examples

Example 1: Hoisting with var

Example 2: Using an Undeclared Variable

Example 3: Function Declarations Are Fully Hoisted

Example 4: Arrow Functions Are NOT Hoisted

Note: let and const Are NOT Like var

Practice Question: What’s the Output?

Wanna Connect?

React Interview Prep Guide 1: Core Concepts Made Easy

📚 Table of Contents

1. JSX and Babel

What is JSX?

What happens to JSX behind the scenes?

What is Babel and why do we need it?

2. Components: Functional vs Class

Functional Components

Why they’re great:

Class Components

3. Props and PropTypes

What Are Props?

Example of Passing Props:

PropTypes: Type Checking in React

Why Use PropTypes?

Example of PropTypes:

Why PropTypes Matter

Major Takeaways

4. State and Lifecycle

What is State?

Example of Using State:

Why is State Important?

The Lifecycle Methods (Class Components)

Example of Lifecycle Methods in Class Components:

The Lifecycle with Hooks (Functional Components)

Example with useEffect:

Why useEffect Is Great:

Key Takeaways

5. Conditional Rendering

Conditional Rendering with if Statements

Example:

Conditional Rendering with Ternary Operator

Example:

Conditional Rendering with Logical AND (&&)

Example:

Conditional Rendering with Switch Statements

Example:

Summary of Conditional Rendering Patterns

Key Takeaways

6. Lists and Keys

Why Lists Are Important in React

Example of Rendering a List:

The Role of key in Lists

Why Keys Are Important:

Best Practices for Keys:

Example of Lists with Stable Keys:

Performance Optimization with Lists and Keys

Example of List with Dynamic Updates:

Key Takeaways

Let’s Connect

Mastering React Hooks as a beginner - useCallback()

Syntax

Example

How Does it Help?

Complete Code:

When Should You Use useCallback?

When Shouldn't You Use useCallback?

Comparing useCallback with Similar Hooks

useMemo vs useCallback

useEffect vs useCallback

useMemo vs useEffect

Summary

useRef Hook: The Silent Helper

Why Use useRef?

How Does useRef Work?

Example: Storing a Timer ID

Example: Focusing an Input Field

When Not to Use useRef

Example 1: Hoisting with `var`

When Should You Use `useCallback`?

When Shouldn't You Use `useCallback`?

Comparing `useCallback` with Similar Hooks

Why Use `useRef`?

How Does `useRef` Work?

When Not to Use `useRef`

`useMemo` – Memoizing in React

When Should You Use `useMemo`?

`useState` – Managing State in React