Forem: Muhib ur Rahman Bakar

🔥 Advanced JavaScript and web development interview questions with Answers 🔥

Muhib ur Rahman Bakar — Wed, 16 Jul 2025 18:02:42 +0000

🔹 JavaScript – Advanced

1. Explain the JavaScript event loop in detail. How does it differ in the browser vs Node.js?
Answer:

The event loop is a mechanism that allows JavaScript to perform non-blocking I/O operations by offloading operations to the system and executing the callback after the operation completes.

Browser:

Has Web APIs (DOM events, setTimeout, etc.).
macrotasks: setTimeout, setInterval, I/O, etc.
microtasks: Promises, MutationObserver.
Executes all microtasks before the next macrotask.

Node.js:

Uses libuv.
Has multiple phases: timers, I/O callbacks, idle/prepare, poll, check, close.
Microtasks (Promises) are also prioritized between phases.

2. What are WeakMap and WeakSet and their real-world use cases?
Answer:

WeakMap and WeakSet store weak references to keys (objects only), allowing garbage collection if no other references exist.
Use case: Storing metadata or caching data tied to DOM elements without risking memory leaks.

const cache = new WeakMap();
function process(node) {
  if (!cache.has(node)) {
    cache.set(node, computeExpensiveValue(node));
  }
  return cache.get(node);
}

3. How does JavaScript handle memory management and garbage collection?
Answer:

Mark-and-sweep: GC periodically checks which objects are still reachable from the root (global scope or closures) and clears unreachable ones.

Reference counting: Tracks number of references (used less now due to circular reference issues).

4. Deep dive into this in different contexts, including arrow functions and class methods.
Answer:

this depends on how a function is called.

Arrow functions don’t bind this — they inherit from the surrounding lexical scope.

In class methods, this refers to the instance unless the method is detached and called separately.

5. How would you implement a custom debounce and throttle function?
Answer:

function debounce(fn, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

function throttle(fn, limit) {
  let lastCall = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastCall >= limit) {
      lastCall = now;
      fn.apply(this, args);
    }
  };
}

🔹 Modern JavaScript (ES6+)

6. What are the benefits of using generators and when would you use them?
Answer:

Generators pause execution (yield) and resume later.

Useful for building iterators, state machines, and asynchronous control flows (with co or redux-saga).

function* counter() {
  let i = 0;
  while (true) yield i++;
}

7. Explain structural sharing and immutability. How do libraries like Immer or Immutable.js help?
Answer:

Structural sharing reuses unchanged data to optimize memory.

Immer uses proxies to allow "mutative" code that produces immutable results.

Immutable.js uses persistent data structures.

🔹 Advanced Web Concepts

8. How would you optimize performance in a React (or large-scale frontend) application?
Answer:

Code splitting via React.lazy, dynamic import().

Memoization (memo, useMemo, useCallback).

Virtualization (react-window).

Avoid unnecessary re-renders using shouldComponentUpdate/React.memo.

Debounce user input.

Avoid anonymous functions in props.

Server-side rendering (SSR) and hydration strategies.

9. Explain CSP (Content Security Policy) and how to prevent XSS in SPAs.
Answer:

CSP is a browser feature to restrict resource loading (scripts, styles, etc.).

Prevent XSS via:

Escaping dynamic content.

Using frameworks that auto-sanitize (React, Angular).

Avoid dangerouslySetInnerHTML.

Set HTTP headers: Content-Security-Policy, X-Content-Type-Options, X-XSS-Protection.

10. Describe the process of server-side rendering (SSR) and hydration in Next.js.
Answer:

SSR: HTML is rendered on the server using getServerSideProps.

Hydration: React attaches event listeners and reactivates the app on the client side using the static HTML.

Benefits: SEO, faster First Contentful Paint (FCP).

If this helped, feel free to save, share, or comment!💥

✅ Next.js Rendering Cheat Sheet

Muhib ur Rahman Bakar — Wed, 09 Jul 2025 16:34:57 +0000

🔹 SSG (Static Site Generation)

Pre-renders the page at build time into static HTML for fast performance.

🔹 ISR (Incremental Static Regeneration)

Regenerates static pages in the background at a set interval or trigger.

🔹 SSR (Server-Side Rendering)

Renders the page on every request with fresh, dynamic data on the server.

🔹 CSR (Client-Side Rendering)

Loads a blank shell and fetches/render content in the browser after load.

💥 Rendering Modes Overview

🚀 Quick Setup Guide
✅ SSG – Default in App Router

// app/page.tsx
export const revalidate = 3600; // Optional: Regenerate every 1 hour

export default async function Page() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();
  return <div>{posts.length} posts</div>;
}

🔁 ISR – Add revalidation interval

export const revalidate = 60; // Rebuild page every 60 seconds

🔄 SSR – Always fetch fresh data

export const dynamic = 'force-dynamic'; // or use cache: 'no-store'

const data = await fetch('https://api.example.com/stats', {
  cache: 'no-store'
});

🌐 CSR – Client-only rendering

'use client';

import { useEffect, useState } from 'react';

export default function ClientComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/data').then(res => res.json()).then(setData);
  }, []);

  return <pre>{JSON.stringify(data)}</pre>;
}

🧭 When to Use What
📝 Static content? → SSG
🔁 Refresh every few minutes? → ISR
👤 Authenticated or real-time data? → SSR
🧩 Fully interactive UI? → CSR

📌 Final Tips
✅ SSG is the default in App Router (unless you disable caching)
⚠️ Use 'use client' only when absolutely necessary
🔀 Mix & match strategies: server-rendered pages + client components = ⚡ powerful UX
🎯 Are you using the right rendering strategy in your Next.js apps?

If this helped, feel free to save, share, or comment!

5 Key Tips to Boost Your ReactJS Performance 🚀

Muhib ur Rahman Bakar — Sun, 30 Apr 2023 11:47:35 +0000

I'd like to share some valuable tips on how to boost the performance of your ReactJS applications. Implementing these best practices can make a significant difference in your app's responsiveness and user experience. Let's dive in! 🌊

1. PureComponent and React.memo 🧩 Utilize PureComponent for class components and React.memo for functional components to prevent unnecessary re-renders. These optimizations ensure that components only update when their props have changed.

import React, { PureComponent } from 'react';

class MyComponent extends PureComponent {
  // Your component logic
}

// OR

import React, { memo } from 'react';

const MyComponent = memo(function MyComponent(props) {
  // Your component logic
});

2. Debounce and Throttle User Input 🎛️ Debounce or throttle user input events like scrolling, typing, or resizing to reduce the number of updates and improve performance.

import { debounce } from 'lodash';

const handleInputChange = debounce((value) => {
  // Your input change logic
}, 300);

3. Lazy Loading and Code Splitting 📦 Leverage React.lazy and React.Suspense to split your code into smaller chunks and load components only when they're needed.

import React, { lazy, Suspense } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <MyComponent />
      </Suspense>
    </div>
  );
}

4. Use the Profiler API and Chrome DevTools 🔍 Identify performance bottlenecks using React DevTools and the Profiler API. This will help you pinpoint areas that need optimization.

import React, { Profiler } from 'react';

function onRenderCallback(
  id,
  phase,
  actualDuration,
  baseDuration,
  startTime,
  commitTime,
  interactions
) {
  // Log or analyze the profiling data
}

function App() {
  return (
    <Profiler id="MyComponent" onRender={onRenderCallback}>
      <MyComponent />
    </Profiler>
  );
}

5. Optimize State and Props Management 📚 Use selectors with libraries like Reselect or Recoil to efficiently manage and derive state, minimizing unnecessary re-renders.

import { createSelector } from 'reselect';

const getItems = (state) => state.items;
const getFilter = (state) => state.filter;

const getFilteredItems = createSelector(
  [getItems, getFilter],
  (items, filter) => items.filter(item => item.includes(filter))
);

Implementing these tips can greatly enhance your ReactJS app's performance. Give them a try and let me know how they work for you! Happy coding! 🎉

ReactJS #Performance #Optimization #WebDevelopment #BestPractices

How to use chatgpt effectively?

Muhib ur Rahman Bakar — Sun, 23 Apr 2023 10:52:48 +0000

As an AI language model, ChatGPT is a powerful tool for generating text and answering questions. Whether you're a student, researcher, writer, or simply curious, ChatGPT can help you find the information you need quickly and easily. In this blog post, we'll explore some tips and tricks for using ChatGPT effectively, so you can get the most out of this amazing AI tool.

1. Start with a clear question or prompt:

When using ChatGPT, it's important to start with a clear and specific question or prompt. This will help the AI model to understand what you're looking for and generate more accurate and relevant responses. Avoid vague or open-ended prompts, and try to be as specific as possible.

2. Use natural language and be conversational:

ChatGPT is designed to understand natural language and generate text in a conversational style. When interacting with ChatGPT, try to use natural language and speak as if you're having a conversation with a human. This will help the AI model to understand your intent and generate more accurate and helpful responses.

3. Provide context and background information:

To help ChatGPT understand your question or prompt better, provide context and background information as necessary. This could include relevant details about a topic, related questions or concepts, or any other information that could help the AI model to generate more accurate responses.

4. Be patient and persistent:

ChatGPT is a powerful AI tool, but it's not perfect. Sometimes it may generate inaccurate or irrelevant responses, or it may struggle to understand your question or prompt. If this happens, don't give up! Try rephrasing your question or providing more context, and keep experimenting until you find the information you need.

5. Explore different formats and options:

ChatGPT can generate text in a variety of formats and styles, including long-form articles, short answers, summaries, and more. Experiment with different formats and options to find the one that works best for you. You can also use ChatGPT to generate text in different languages or styles, such as formal or informal language.

6. Verify information and check sources:

As with any information source, it's important to verify the accuracy and reliability of the information generated by ChatGPT. Check multiple sources and compare the information generated by ChatGPT with other sources to ensure that it's accurate and up-to-date.

Examples:

here are some examples of effective prompts to use with ChatGPT:

"Can you explain the concept of artificial intelligence in simple terms?"
"What are the benefits and drawbacks of using renewable energy sources?"
"How has the COVID-19 pandemic impacted the global economy?"
"What are some effective ways to reduce stress and improve mental health?"
"Can you provide a summary of the history and impact of the Civil Rights Movement in the United States?"
"What are some effective strategies for managing remote teams and maintaining productivity?"
"What are the major challenges and opportunities facing the healthcare industry in the next decade?"
"Can you provide a comprehensive overview of the principles of quantum mechanics and their applications?"
"What are some of the ethical concerns and implications of genetic engineering?"
"How has social media impacted the way we communicate and interact with others?"

These prompts are specific, clear, and require a thoughtful response from ChatGPT. By using effective prompts like these, you can help ensure that ChatGPT generates accurate and relevant information that meets your needs.

In conclusion, ChatGPT is a powerful AI tool that can help you find the information you need quickly and easily. By following these tips and tricks, you can use ChatGPT effectively and get the most out of this amazing AI language model. Whether you're a student, researcher, writer, or simply curious, ChatGPT is a valuable tool that can help you unlock new knowledge and insights.

What is ReactJs?

Muhib ur Rahman Bakar — Fri, 10 Feb 2023 16:58:46 +0000

React is a JavaScriptlibrary for building user interfaces. It allows you to build reusable UI components and manage the state of your application efficiently. Here's a beginner's tutorial for ReactJS using examples:

Setting up a React environment:
To start building with React, you need to set up a development environment. You can do this using tools like CodeSandboxor you can set up a local environment using npm and a text editor like Visual Studio Code.

Creating a React component:
A componentin React is a piece of UI that can be reused multiple times in an application. You can create a component in React using JavaScript functionsor classes. Here's an example of a functional component:

import React from "react";

function MyComponent() {
  return <h1>Hello, World!</h1>;
}

export default MyComponent;

And here's an example of a class component:

import React, { Component } from "react";

class MyComponent extends Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

export default MyComponent;

Rendering a component:
To render a component in React, you need to import it into a file and use the <MyComponent /> syntax to render it. Here's an example:

import React from "react";
import MyComponent from "./MyComponent";

function App() {
  return (
    <div>
      <MyComponent />
    </div>
  );
}

export default App;

Props and State:
In React, you can pass data to components using props and manage the state of a component using the state object. Props are properties that are passed to a component from its parent component. The state is an object that holds data that can change within a component. Here's an example:

import React, { useState } from "react";

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

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

export default Counter;

Event handling:
You can handle events in React components using event handlers. An event handler is a function that is executed when an event occurs, such as a button click. Here's an example:

import React, { useState } from "react";

function Toggler() {
  const [isToggled, setToggled] = useState(false);

  return (
    <div>
      <p>Toggled: {isToggled.toString()}</p>
      <button onClick={() => setToggled(!isToggled)}>Toggle</button>
    </div>
  );
}

export default Toggler;

These are the basics of ReactJS. Visit React Docs for more. You can use these concepts to build more complex applications and learn advanced topics as you progress.
Follow @bakardev for more. ✌

New year plans to become a JavaScript Developer - 2023

Muhib ur Rahman Bakar — Mon, 02 Jan 2023 14:12:38 +0000

There are many things that a JavaScript developer could do to improve their skills and stay up-to-date in the field. Here are a few ideas for New Year's resolutions:

Improve your understanding of the JavaScript language: There is always more to learn about any programming language, and JavaScript is no exception. Consider taking an online course or working through a book to deepen your understanding of the language.

Learn a new JavaScript framework: There are many popular JavaScript frameworks to choose from, such as React, Angular, and Vue.js. Pick one that interests you and spend some time learning how to use it.

Build something: The best way to learn is by doing. Consider building a small project or adding features to an existing project to practice your skills and learn new techniques.

Contribute to an open source project: Open source projects are a great way to learn and make a difference. Look for a project that interests you and see if you can contribute.

Attend a conference or meetup: Conferences and meetups are a great way to learn about new developments in the field and meet other developers. Consider attending one or more events in the coming year.

Feel free to add more things :)

JavaScript - Primitive and Non-Primitive Datatypes

Muhib ur Rahman Bakar — Sun, 01 Jan 2023 15:57:09 +0000

In JavaScript, there are two main categories of data types: primitive and non-primitive (also called reference).

Primitive data types are simple, immutable values that are stored directly in the memory. There are six primitive data types in JavaScript:

String: A sequence of characters, represented in quotes (single or double). Example: "Hello World"
Number: Numeric values. Can be integers or floating-point values. Example: 42
Boolean: A value that is either true or false. Example: true
Null: A value that represents the absence of a value or object. Example: null
Undefined: A value that indicates a variable has not been assigned a value. Example: undefined
Symbol: A unique, immutable data type that can be used as an identifier for object properties. Example: Symbol("description")

Non-primitive (reference) data types are values that are stored as references in memory. These data types are objects, and they are mutable (can be modified). Here are some examples of non-primitive data types:

Array: An ordered collection of values. Example: [1, 2, 3]
Object: A collection of key-value pairs. Example: {name: "John", age: 30}
Function: A block of code that can be called by name. Example: function greet() { console.log("Hello!") }
Date: A value that represents a specific point in time. Example: new Date()

I hope this helps! Let me know if you have any questions.