Forem: Pratik Singh

50 Shades of React: Questions to Prepare for the Interview Battle

Pratik Singh — Sun, 02 Feb 2025 12:36:28 +0000

When I first started preparing for React interviews, I remember feeling overwhelmed by the sheer number of concepts to learn and master. From hooks to context, to component lifecycles and state management – it felt like there was so much to keep track of! But over time, I realized that focusing on the right set of questions and understanding the core concepts thoroughly made all the difference. That’s when I decided to put together this blog, compiling 50 of the most commonly asked React interview questions along with concise answers. Whether you're a student just starting out or a developer prepping for that big interview, this guide will give you the quick revision you need without the fluff. Let’s jump into these questions and get you one step closer to nailing your React interview!"

1. What is ReactJS, and what are its key features?

ReactJS is an open-source JavaScript library developed by Facebook. It is used for building user interfaces in web applications.
Key features include a virtual DOM for efficient updates, component-based architecture for reusability, JSX for declarative syntax, and unidirectional data flow

2. What is JSX, and why is it used in React?

JSX (JavaScript XML) is an extension to JavaScript that allows you to write HTML-like code within JavaScript. It provides a more readable and concise way to describe the structure of UI components. React uses JSX to define the structure of components, making it easier to visualize and understand the UI hierarchy.

3. Explain the concept of “props” in React.

Props (short for properties) are a mechanism for passing data from a parent component to a child component. They are read-only and provide a way to configure and customize child components based on their parent’s data. Props are an essential part of creating reusable and dynamic components.

4. What is state in React, and how is it different from props?

State is a mechanism for managing and storing dynamic data within a component. Unlike props, which are passed from parent to child and are read-only, state is local to a component and can be updated using the setState method. State enables components to re-render when data changes, updating the UI dynamically.

5. What are React hooks, and how do they differ from class components?

React hooks are functions that allow you to use state and other React features in functional components. They provide an alternative to class components by enabling the use of state and lifecycle features without writing a class. Hooks, such as useState and useEffect, streamline component logic and make it more concise.

6. Explain the concept of the virtual DOM and its advantages.

The virtual DOM is a lightweight copy of the actual DOM in memory. React uses it to perform efficient updates by comparing the virtual DOM with the previous version and calculating the minimum number of changes needed to reflect the new state. This minimizes direct manipulation of the actual DOM, leading to improved performance and responsiveness.

Virtual DOM is a concept where a virtual representation of the real DOM is kept inside the memory and is synced with the actual DOM by a library such as ReactDOM.

The virtual DOM is an object that represents the real DOM in the memory. Since DOM updates are an integral part of any web app but are the costliest operation in the world of frontend, the virtual DOM is utilized to check for parts of the app that need to be updated & update only those parts, thus significantly boosting performance.

7. What is the purpose of the “key” prop in React lists?

The “key” prop is used to uniquely identify elements in a list of components. It helps React efficiently update and reorder components by providing a stable identity for each item. Using keys correctly improves the performance of rendering and updating lists.

Key helps React identify which items have changed, are added, or are removed, enabling it to reuse already existing DOM elements, thus providing a performance boost.

8. How does Redux work, and when would you use it?

Redux is a state management library for managing the global state of an application. It uses a single source of truth and enforces a unidirectional data flow. React Redux is suitable for large-scale applications with complex state management needs, where multiple components need access to shared data.

9. What is the significance of the “shouldComponentUpdate” method?

The shouldComponentUpdate method is used to optimize performance by determining whether a component should re-render. It is called before a component updates and receives the next props and state. By returning false in certain conditions, you can prevent unnecessary re-renders and improve performance.

10. How do you handle forms in React, and what is controlled vs. uncontrolled components?

Forms in React can be controlled or uncontrolled. Controlled components have their state controlled by React and are updated via the setState method. Uncontrolled components manage their state using the DOM directly. Controlled components provide a more predictable and maintainable way to handle form inputs.

11. Why do we need to transpile React code?

React code is written in JSX, but no browser can execute JSX directly as they are built to read-only regular JavaScript.
Thus we require to use tools like Babel to transpile JSX to JavaScript so that the browser can execute it.

12. What is the significance of refs in React?

Refs are variables that allow you to persist data between renders, just like state variables, but unlike state variables, updating refs does NOT cause the component to re-render.

Refs are usually used to, but not restricted to, store reference to DOM elements.

13. What are the most common approaches for styling a React application?

CSS Classes
Inline CSS
Pre-processors (Sass, Stylus, and Less)
CSS-in-JS Modules (Styled Components, Emotion, and Styled-jsx)

14. What are some of the performance optimization strategies for React?

Avoid Unnecessary Re-renders: Use React.memo, useMemo, useCallback, and PureComponent.
Optimize State Management: Lift state wisely, use local state when possible, and batch updates.
Virtualization for Large Lists: Use react-window or react-virtualized.
Code-Splitting & Lazy Loading: Use React.lazy, Suspense, and dynamic imports.
Optimize Asset Loading: Compress images, use lazy loading, and tree-shake dependencies.
Optimize Network Requests: Use caching (React Query, SWR), debounce expensive API calls.

15. What is prop drilling and how to avoid it?

Sometimes while developing React applications, there is a need to pass data from a component that is higher in the hierarchy to a component that is deeply nested. To pass data between such components, we pass props from a source component and keep passing the prop to the next component in the hierarchy till we reach the deeply nested component.

The disadvantage of using prop drilling is that the components that should otherwise be not aware of the data have access to the data, moreover, the code becomes harder to maintain.

Prop drilling can be avoided using the Context API or some form of State Management library.

16. What is the StrictMode component and why would you use it?

is a component included with React to provide additional visibility of potential issues in components. Suppose the application is running in development mode. In that case, any issues are logged to the development console, but these warnings are not shown if the application is running in production mode.

Developers use to find problems such as deprecated lifecycle methods and legacy patterns, to ensure that all React components follow current best practices.

can be applied at any level of an application component hierarchy, which allows it to be adopted incrementally within a codebase.

17. What are synthetic events in React?

Synthetic events combine the response of different browser's native events into one API, ensuring that the events are consistent across different browsers. The application is consistent regardless of the browser it is running in.

const Component = () => {
  const handleClick = (e) => {
    e.preventDefault(); // synthetic event
    console.log("link clicked");
  };
  return <a onClick={(e) => handleClick}>Click me</a>;
};

18. Why is it not advisable to update state directly, but use the setState call?

The conventional way to update state is to use the setState call. Without using it, the user would still be able to modify the state, but it would not update the DOM to reflect the new state.

19. What are portals in React?

Portal is a recommended way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

const Portal = ({ children }) => {
  // NOTE: it is advisable to create a new DOM node for the portal
  const portalRoot = document.getElementById("portal-root");
  return ReactDOM.createPortal(children, portalRoot);
};

20. What is a component in React?

In React, a component is a modular, reusable piece of code that defines a part of a user interface. Components can be thought of as building blocks for larger applications. They are typically composed of HTML-like markup (in the form of JSX) and JavaScript logic that defines their behavior.

21. What is the difference between a functional and class component?

In React, there are two main types of components: functional components and class components.

Functional components are defined as JavaScript functions that return some JSX code. They are simple, lightweight, and typically used for simple UI components that don’t require any state or lifecycle methods. They can be easily reused and composed to create more complex components.

import React from 'react';

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

Class components, on the other hand, are defined as ES6 classes that extend the React.Component class. They have more features than functional components, including the ability to manage state and lifecycle methods. They are typically used for more complex UI components that require more logic and interaction. Here's an example of a class component:

import React from 'react';

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

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

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

22. How do you pass data from a parent component to a child component in React?

In React, data can be passed from a parent component to a child component using props.

23. What is the ‘useEffect’ hook in React and when would you use it?

The useEffect hook is used in React to perform side effects such as fetching data, updating the document title, or adding event listeners. It allows you to run a function after rendering a component, and optionally specify dependencies that should trigger a re-run of the function.

24. What is the ‘useState’ hook in React and when would you use it?

The useState hook is used in React to add state to functional components. It allows you to declare state variables and update them using the useState function.

25. What are ‘Higher-Order Components’ (HOC) and when would you use them in React?

Higher-Order Components (HOC) are functions that take a component and return a new component with additional functionality. HOCs allow you to reuse code and logic across different components in your application. You can use HOCs to add functionality such as authentication, data fetching, or error handling to your components.

For example, you could create an HOC that adds authentication to a component by checking if the user is logged in before rendering the component. This allows you to reuse this authentication logic across multiple components in your application.

26. What is ‘Render Prop’ and when would you use it in React?

Render Prop is a pattern in React where a component takes a function as a prop and calls it to render its content. The function takes the component’s state and returns the JSX to render. This allows you to share state and logic between components without using Higher-Order Components.

Render Prop can be used to create reusable components that can be customized with different content or functionality. For example, you could create a component that renders a dropdown menu and takes a function to render the menu items. This allows you to reuse the dropdown component with different menu items in different parts of your application.

27. What is the significance of React Fragments?

React Fragments allow you to group multiple elements without adding unnecessary nodes to the DOM. It’s useful when you don’t want to introduce an additional parent div.

28. What is the significance of Pure Component in React?

Pure Component is a base class for class components that implements a shouldComponentUpdate method with a shallow prop and state comparison. It helps in preventing unnecessary renders for performance optimization.

29. What are React Hooks rules?

Hooks in React must be called at the top level (not inside loops or conditions), and they must be called from React functional components or custom Hooks.

30. What is the significance of the dangerouslySetInnerHTML attribute in React?

dangerouslySetInnerHTML is used to inject HTML content into a React component. It should be used with caution, as improper use can expose the application to Cross-Site Scripting (XSS) attacks.

31. What is the purpose of the useContext Hook in React?

useContext is a Hook in React used for consuming the value of a context. It provides a way to access the values of a context directly within a functional component.

32. Explain the concept of code-splitting in React.

Code-splitting is a technique in React that involves breaking the code into smaller chunks and loading them on demand. This helps in optimizing the initial loading time of the application.

33. What is the role of the displayName property in React?

The displayName property is used to set a display name for a React component, making it easier to debug and profile the component hierarchy.

34. Explain the concept of lazy loading in React.

Lazy loading is a technique where components or resources are loaded only when they are actually needed. React provides the React.lazy function for lazy loading components.

const LazyComponent = React.lazy(() => import('./LazyComponent'));

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

35. What is the purpose of the React.PureComponent class in React?

React.PureComponent is similar to React.Component but implements shouldComponentUpdate with a shallow prop and state comparison, optimizing performance by preventing unnecessary renders.

36. How does React handle error boundaries, and what is their purpose?

Error boundaries in React catch JavaScript errors anywhere in their component tree and log those errors, preventing the entire application from crashing. They are used for better error handling and logging.

37. How to pass data from child to parent in react?

To pass data from a child component to a parent component in React, you typically use callback functions.

import React, { useState } from 'react';
import Child from './Child';

const Parent = () => {
    const [childData, setChildData] = useState('');

    // Function to handle data from child
    const handleChildData = (data) => {
        setChildData(data);
    };

    return (
        <div>
            <h1>Parent Component</h1>
            <p>Data from Child: {childData}</p>
            <Child onSendData={handleChildData} />
        </div>
    );
};

export default Parent;

import React from 'react';

const Child = ({ onSendData }) => {
    const sendData = () => {
        const data = 'Hello from Child!';
        onSendData(data); // Call the parent's function with data
    };

    return (
        <div>
            <h2>Child Component</h2>
            <button onClick={sendData}>Send Data to Parent</button>
        </div>
    );
};

export default Child;

38. Design Patterns in React?

Higher-Order Components
Render Props Pattern
Custom Hooks (Hooks Pattern)
Context API for State Sharing

39. What is the use of ReactDOMServer?

Answer: ReactDOMServer is a module in React that enables server-side rendering (SSR).

40. What is the difference between Rendering and Mounting?

Rendering refers to the process of generating the user interface (UI) based on the component's state and props. It happens when a component is converted into DOM elements.

Mounting is a specific phase in the React component lifecycle when a component is inserted into the DOM for the first time. It is part of the initial rendering process.

41. What is React reconciliation?

React reconciliation is the process by which React updates the user interface when the state of a component changes.

42. What do you understand from React Fiber?

React Fiber is the reconciliation engine for React, introduced in React 16 to improve the rendering performance and capabilities of React applications.

43. What is babel?

Babel is a JavaScript compiler that allows you to write modern JavaScript (ES6+ or JSX) and converts it into a version of JavaScript that can run in older browsers or environments.

44. What is the use of Webpack?

Webpack is a module bundler that takes your code and its dependencies (JavaScript, CSS, images, etc.) and bundles them into a single or few output files that can be efficiently served to the browser.

45. Explain Memory Leak in React?

A memory leak in React occurs when components or resources that are no longer needed are not properly cleaned up, resulting in increased memory usage over time.

46. What are the two algorithm React built on?

Answer:

Reconciliation Algorithm
Component Life Cycle Methods

47. Is stateless component and functional component same? If yes the how we are using useState hook and use state?

While stateless components traditionally refer to functional components that do not hold state, modern functional components can use hooks like useState to manage their internal state, making them stateful. Thus, all functional components are not inherently stateless; they can be stateful if they utilize hooks.

*48. What is React Suspense Boundary? *

React Suspense is a feature that manages loading states for components that fetch data asynchronously or are loaded dynamically. It allows you to show a fallback UI (like a loading spinner) while waiting for the content to load.

Key Points:
Suspense Component: Wraps around lazy-loaded components or those that fetch data asynchronously.
Fallback UI: Displays a specified loading UI until the wrapped component is ready.

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

const LazyComponent = lazy(() => import('./LazyComponent')); // Lazy-load the component

const App = () => {
  return (
    <div>
      <h1>My App</h1>
      <Suspense fallback={<div>Loading...</div>}> {/* Fallback UI */}
        <LazyComponent />
      </Suspense>
    </div>
  );
};

export default App;

49. What is the difference between React VS Angular?

Answer:
React

Developed by Facebook.
Uses JSX (JavaScript XML) for templating.
Features unidirectional data flow, which means data flows in one direction (from parent to child).
Utilizes a Virtual DOM to optimize rendering performance, making updates faster.
Often uses Flux or Redux for state management, allowing for a predictable state container.

Angular

Developed by Google.
Uses standard HTML and JavaScript/TypeScript for templating.
Supports bidirectional data binding, meaning changes in the UI automatically update the model and vice versa.
Works with the real DOM, which can be slower in certain scenarios due to direct manipulation of the actual DOM.
Follows the MVC (Model-View-Controller) architecture, providing a structured approach to building applications.

50. Explain life cycle method in react?

Answer: In React, lifecycle methods are special functions that allow you to hook into different stages of a component's lifecycle, providing control over how a component behaves throughout its existence. They are primarily used in class components but can also be managed through hooks in functional components.

Stages of a Component Lifecycle

Mounting:

When a component is being created and inserted into the DOM.

constructor(): Initializes state and binds methods.
componentDidMount(): Invoked immediately after a component is mounted. Ideal for fetching data or starting subscriptions.

Updating:

When a component is being re-rendered due to changes in props or state.

shouldComponentUpdate(nextProps, nextState): Determines whether the component should update. Returning false prevents the update.
render(): Renders the component UI. This method is required and returns the JSX to display.

componentDidUpdate(prevProps, prevState): Invoked immediately after updating occurs. Useful for operating on the DOM or making network requests after the component re-renders.

Unmounting:

When a component is being removed from the DOM.

componentWillUnmount(): Invoked immediately before a component is unmounted and destroyed. It's used for cleanup tasks, like canceling network requests or removing event listeners.

As I went through this list of 50 questions, I realized how much I’ve grown as a developer – not just in my knowledge of React, but in my approach to problem-solving and thinking critically about the concepts. If you’ve made it this far, you’ve already taken a big step toward being interview-ready. The key is to keep revisiting these questions, diving deeper into what you’ve learned, and practicing with real-world projects. So, take a deep breath, review the answers, and get ready to show your React expertise with confidence. Your next interview might just be the one where you shine – and I have no doubt you’re ready!

Essential JavaScript Interview Questions You Should Know

Pratik Singh — Sun, 05 Jan 2025 13:05:10 +0000

As someone who's navigated through numerous JavaScript interviews, I’ve compiled a list of essential questions that tested my skills and understanding of core concepts. In this first part of the series, I’m sharing 40 questions I personally faced, covering everything from fundamentals to key interview topics.

These questions are not just theoretical; they challenge you to demonstrate your practical knowledge and problem-solving abilities. Whether you’re preparing for a front-end or full-stack role, these questions will help you sharpen your skills.

Chalo Shuru karte hai!

1. Is javaScipt dynamic type or variable type language?

Answer: JavaScript is a dynamically typed language, meaning variable types can change at runtime instead of being set at compile time.

2. How do you send http requests to backend?

Answer: Fetch API, Axios, XMLHttpRequest

3. What is Execution Context?

Answer: In JavaScript, the Execution Context is the environment where code runs and decides what variables, objects, and functions are available to use. Each time a function runs, a new execution context is made just for that function, holding its own variables and scope.

Each execution context has two main phases:

Memory Creation Phase: JavaScript first scans the code and allocates memory for variables and functions.
Execution Phase: The code runs line-by-line.

4. What is Lexical Environment?

Answer: A lexical environment in JavaScript is a data structure that stores variables and functions defined in the current scope, along with references to all outer scopes. It is also known as the lexical scope.

5. What's the difference between null and undefined?

Answer: null: An assignment value that means a variable points to no object, showing that it has no specific value.

undefined: Means a variable is declared but has no assigned value, showing the variable itself is missing a value.

Type of null is object.
Type of undefined is undefined.

6. How JavaScript handle memory?

Answer: JavaScript manages memory primarily through automatic garbage collection, meaning it automatically allocates and releases memory during code execution.

7. Explain Event Loop?

Answer: JavaScript is a single-threaded language, meaning it can only execute one task at a time within a single call stack. However, despite this single-threaded nature, JavaScript is capable of performing asynchronous, non-blocking operations thanks to the event loop.

The event loop is a fundamental mechanism in JavaScript that handles asynchronous operations. When a task, such as an HTTP request or a DOM event, is initiated, it is handed off to browser APIs.

The event loop continuously monitors the call stack and the task
queues. If the call stack is empty, the event loop first checks the
microtask queue for any pending tasks and executes them.

Once the microtask queue is empty, the event loop then checks the macrotask queue and moves tasks from there to the call stack for execution. This process ensures that high-priority tasks (microtasks) are executed before lower-priority tasks (macrotasks).

8. Hoisting and Temporal Dead Zone?

Answer: Hoisting is a JavaScript feature that allows you to use variables and functions before they are declared. This means that you can variables and functions before they are defined in your code. Hoisting is done by the JavaScript engine, which moves the declaration of variables and functions to the top of their "scope".

In JavaScript, before executing any code, the JavaScript engine performs a memory preparation phase known as hoisting. During this phase, the engine allocates memory for variables and functions.

Function declarations are fully hoisted, meaning they can be invoked anywhere within their scope, even before their actual line of declaration.

Variables declared with var are hoisted and initialized with undefined. This means you can access var variables before their declaration, but their value will be undefined.

On the other hand: Variables declared with let and const are also hoisted but remain uninitialized. Accessing them before their declaration in the code results in a ReferenceError.

Temporal Dead Zone:

This period between the start of the block and the actual declaration of a let or const variable is called the Temporal Dead Zone (TDZ). The TDZ exists from the start of the block until the line where the variable is declared and initialized.

Temporal dead zone is a concept in JS related to let and const declarations. Variables with let or const declarations are hoisted to the top of their scope, but they are not immediately available in the code. This means that you can use a variable before it is declared, but the value of the variable will be undefined until it is assigned a value.

9. Scope and Scope Chain?

Answer: Scope governs the accessibility of variables in different parts of the code. It determines where a variable can be accessed and
where it cannot.

There are three types of scopes:

Global Scope: Variables declared in the global scope can be
accessed from anywhere in the code.
Local Scope: Variables declared within a function are only
accessible within that function.
Block Scope: Variables declared inside a block (like within curly
braces {}) are only accessible within that block.

Scope Chain:

Scope chain means a chain of references. JavaScript doesn't give up; it has a hunting mechanism for variables. It keeps searching for the variable. First, it will check in the local scope to see if the variable is accessible. If not, it will look in the outer scope. It will keep going until it reaches the global scope or the global execution context. This continuous hunting for a variable during the chain is called scope chaining. The execution context always searches from the inner scope to the outer scope, but it can't go from the outer scope to the inner scope.

10. Prototypal Inheritance?

Answer: Linking of prototypes of a parent object to a child object to share and utilize properties of parent class. It means that properties and methods can be transferred from one object to another through the prototype.

For example, methods like .join and .length are part of prototypal inheritance because these properties come from the main Object class in JavaScript and are available in your objects.

In JavaScript, everything is an object, so objects can share properties. This means that arrays can use methods from objects, and strings can do the same.

let faang = {
    name: "google",
    salary: function(){
        console.log("100K Salary")
    }
}

let engineer = {
    employeeId: 1278,
    role: function(){
        console.log("Frontend Developer")
    }
}

Older Way:

engineer.__proto__ = faang;

New Way:

let engineer = Object.create(faang, {
    role: function(){
        console.log("Backend Developer")
    }
})

Object.setPrototypeOf(engineer, faang);

// let res = Object.getPrototypeOf(faang);

11. Explain Promises in JavaScript?

Answer: Promises are a way to handle asynchronous operations in JavaScript. They allow you to write code that can be executed asynchronously, without blocking the main thread. Promises are created using the Promise constructor, and can be chained together using the then method.

A Promise in JavaScript acts as a placeholder that can resolve or reject in future.

Promises have three states: pending, fulfilled, and rejected. When a promise is pending, it means that the asynchronous operation is still in progress. When a promise is fulfilled, it means that the asynchronous operation has completed successfully. When a promise is rejected, it means that the asynchronous operation has failed.

Handling Promises

Promises provide methods to handle the outcome of the asynchronous operation:

.then(): Used to handle the fulfilled state and obtain the resolved
value.
.catch(): Used to handle the rejected state and catch any errors
that occurred during the execution.
.finally(): This method executes a callback when the promise is
settled, meaning it will run whether the promise is fulfilled or
rejected.

12. Explain Async Await?

Answer: Async/await is a syntax feature in JavaScript that allows you to write asynchronous code in a more synchronous way. It uses the async and await keywords to define asynchronous functions

In JavaScript async function returns a Promise. The await keyword pauses the execution of the async function until the awaited promise resolves. After await rest of async function gets in microtask queue. This allows for more readable and manageable asynchronous code.

async function fetchData() {
  try {
    const response = await fetch('https://api.freeapi.app/v1/jokes/random');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchData()
  .then(() => console.log('Data fetched'))
  .catch(error => console.error(error));

13. Explain this keyword?

Answer: The “this” keyword refers to the object that is currently executing the function. Its value depends on the context in which the function is called. In the global context (such as in a browser), this refers to the window object

14. Explain Closure and Lexical Scope?

Answer: Closures are functions that have access to variables from their outer scope, even after the outer function has finished executing.

Here's an example of a closure in JavaScript:

function outerFunction() {
  const outerVariable = 'I am an outer variable';

  function innerFunction() {
    console.log(outerVariable); // Output: I am an outer variable
  }

  return innerFunction;
}

const closure = outerFunction();
closure(); // Output: I am an outer variable

In this example, the outerFunction function defines a variable outerVariable and a function innerFunction that has access to outerVariable. The innerFunction returns the outerFunction function, which allows it to be called later.

One DOM related example of a closure is the addEventListener method. The addEventListener method allows you to attach event listeners to elements in the DOM. The event listener function has access to the element's properties and methods, even after the element has been removed from the DOM.

Here's an example of using the addEventListener method with a closure:

const button = document.getElementById('myButton');

function handleClick() {
  console.log('Button clicked');
}

button.addEventListener('click', handleClick);

In this example, the handleClick function is defined inside the addEventListener method. The handleClick function has access to the button element, even after the button element has been removed from the DOM.

Lexical Scope:

In JavaScript, lexical scope is the concept of determining the scope of a variable based on its declaration. This means that the scope of a variable is determined by the block of code in
which it is declared, not by the block of code in which it is used.

15. Is javascript single threaded or multi-threaded?

Answer: JavaScript is a single-threaded language, meaning it has one call stack and one memory heap. It executes code in order, completing one piece of code before moving on to the next. This structure allows JavaScript to handle asynchronous operations without blocking the main thread.

Asynchronous behavior lets us use features like setTimeout, AJAX, and promises. These functions are managed by the browser, not JavaScript itself, which helps keep the main thread free to run other code while waiting for these operations to complete.

16. Explain how javascript engines works?

Answer: JavaScript engines are programs that execute JavaScript code. They are found in web browsers and other environments that host JavaScript. The most popular JavaScript engines are Google's V8, SpiderMonkey, and JavaScriptCore. These engines are written in C++ and are used to execute JavaScript code.

17. Difference between var, let and const?

Answer:

-var: The scope of a variable defined with the keyword “var” is limited to the “function” within which it is defined. If it is defined outside a function, the scope of the variable is global. Default value of var is undefined.

let: The scope of a variable defined with the keyword “let” or “const” is limited to the “block” defined by curly braces i.e. {}. Default value of let is uninitialized.
const: The scope of a variable defined with the keyword “const” is limited to the block defined by curly braces. However if a variable is defined with keyword const, it cannot be reassigned. Default value of const is uninitialized.

18. Different types of data types in javascript?

Answer: There are mainly two types of data types in JavaScript: primitive data types and object (reference) data types.

Primitive data types are the basic data types in JavaScript. They include numbers, strings, booleans, null, and undefined. Symbols are also primitive data types, that represent unique identifiers.

Object data types are data types that contain other data types. They are created using object literals or constructor functions. Objects, Arrays, and Functions are examples of object data types.

19. Discuss callback?

Answer: Callback functions are functions that are passed as arguments to other functions and are called when a certain event occurs. They are commonly used in JavaScript to handle asynchronous operations, such as making HTTP requests or reading from a file.

20. Discuss Callback Hell?

Answer: Callback hell is a problem in JavaScript where functions are nested inside each other, making the code difficult to read and understand. It can lead to callbacks being called multiple times or not being called at all, which can cause unexpected behavior.

Here's an example of callback hell:

fetchRandomJoke(joke) =>{
  console.log(joke);
  translateJoke(joke, translation) =>{
    console.log(translation);
    writeToFile(translation, file) =>{
      console.log('Joke written to file');
      sendEmail(translation, email) =>{
        console.log('Joke sent to email');
      }
    }
  }
}

//better way to do it
const fetchRandomJoke = async (joke) => {
  const joke = await fetchJoke();
  const translation = await translateJoke(joke);
  await writeToFile(translation, file);
  await sendEmail(translation, email);
}

21. How to create object in javascript?

Answer: Objects are a fundamental data type in JavaScript. They can be created using object literals or constructor functions.

Object literals are enclosed in curly braces {} and are used to create objects with key-value pairs. Here's an example of an object literal:

const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

Constructor functions are used to create objects with custom properties and method:

function Person(name, age, city) {
  this.name = name;
  this.age = age;
  this.city = city;
}

const person = new Person('John', 30, 'New York');

Although there are other ways to create objects such as using the Object.create() method, object literals and constructor functions are the most common ways to create objects in JavaScript.

22. How to clone a object in JavaScript?

Answer:

Using Object.assign():

const original = { a: 1, b: 2 };
const clone = Object.assign({}, original);

Using the Spread Operator:

const original = { a: 1, b: 2 };
const clone = { ...original };

23. What are rest and spread operator in javascript?

Answer: Rest and spread operator are two important features in JavaScript that allow you to work with arrays and objects in a more concise and readable way.

The rest operator allows you to take an array or an object as an argument and use it in a function call.

The spread operator allows you to expand an array or an object into individual elements.

function sum(...numbers) {
  return numbers.reduce((total, number) => total + number, 0);
}

console.log(sum(1, 2, 3, 4, 5)); // Output: 15

//spread operator
const arr1 = [1, 2, 3];
const arr2 = [4, 5];

const arr3 = [...arr1, ...arr2];
console.log(arr3); // Output: [1, 2, 3, 4, 5]

In this example, the sum function takes an array of numbers as an argument using the rest operator.
The spread operator is used to expand the array into individual elements, which are then passed to the reduce function.

24. What is higher order function in javascript?

Answer: Higher order functions are functions that take other functions as arguments or return functions as results. They are a powerful tool in JavaScript that allow you to write more flexible and reusable code.

function applyTwice(func, arg) {
  return func(func(arg));
}

console.log(applyTwice(Math.sqrt, 16))

// A higher-order function that takes a number and returns another function
function add(n) {
  return function(x) {
    return x + n; // Adds n to x
  };
}

// Using the higher-order function
const addFive = add(5); // Creates a function that adds 5
console.log(addFive(10)); // Outputs: 15
console.log(addFive(20)); // Outputs: 25

25. Name some features of ES6 in javascript.

Answer: Here are some of the key features of ES6:

Arrow functions: Arrow functions provide a more concise syntax for writing functions. They are defined using the => operator.
Template literals: Template literals allow you to embed expressions inside strings. They are enclosed in backticks (`) and can be used to create multi-line strings.
Destructuring assignment: Destructuring assignment allows you to extract values from arrays or objects and assign them to variables. It is done using the = operator.
Spread operator: The spread operator allows you to expand an array or an object into individual elements. It is used to pass multiple arguments to a function.
Classes: Classes provide a way to define objects with properties and methods. They are defined using the class keyword.
Modules: Modules allow you to split your code into separate files and import/export functionality between them. They are defined using the import and export keywords.
Promises: Promises provide a way to handle asynchronous operations in JavaScript. They are used to represent the eventual completion or failure of an asynchronous operation.
Generators: Generators allow you to define functions that can be paused and resumed. They are defined using the function keyword.
Maps and Sets: Maps and Sets are data structures that allow you to store key-value pairs. They are defined using the Map and Set constructors.

Why These Questions Matter

These questions reflect the core concepts I encountered during my interviews. They’re designed to test your understanding of JavaScript in real-world scenarios.

Preparing for a JavaScript interview? Revisit these questions and practice your answers. For a more in-depth learning experience, check out my courses on quicknxt.com to gain hands-on knowledge and improve your coding skills. Let’s continue learning together!

Understanding forwardRef in React: A Comprehensive Guide

Pratik Singh — Sun, 10 Nov 2024 15:45:43 +0000

As React continues to evolve, developers often encounter patterns that enhance the flexibility and usability of components. One such pattern is forwardRef, a powerful feature that allows components to pass refs to their children, enabling direct access to the underlying DOM elements or component instances. In this blog, we’ll explore what forwardRef is, when to use it, and how it can streamline your React applications.

What is `forwardRef`?

forwardRef is a higher-order component that enables you to create a ref that can be forwarded to a child component. This is particularly useful when you want a parent component to directly interact with a child component’s DOM node, especially in cases where you need to manage focus, animations, or integrate with third-party libraries that rely on refs.

Why Use `forwardRef`?

Using forwardRef offers several advantages:

Direct DOM Manipulation: It allows parent components to manipulate the DOM of child components directly.
Integration with Third-Party Libraries: Many libraries expect refs to be passed to components, and forwardRef makes this seamless.
Reusable Components: It helps maintain encapsulation while exposing necessary functionalities to parent components, enhancing reusability.

Syntax Overview

The syntax for forwardRef is straightforward. Here’s how it looks:

const ComponentWithRef = React.forwardRef((props, ref) => {
  return <div ref={ref}>Hello, World!</div>;
});

In this example, ref is passed to the underlying <div>, allowing the parent component to access it.

Implementation Example:

Let’s look at a practical example to understand how to use forwardRef.

import React, { useRef } from 'react';

const CustomInput = React.forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

const ParentComponent = () => {
  const inputRef = useRef();

  const focusInput = () => {
    inputRef.current.focus(); // Directly focuses the input element
  };

  return (
    <>
      <CustomInput ref={inputRef} placeholder="Type here" />
      <button onClick={focusInput}>Focus Input</button>
    </>
  );
};

export default ParentComponent;

Explanation:

CustomInput: This is a functional component that uses forwardRef to forward its ref to the underlying <input> element.

ParentComponent:: This component uses the useRef hook to create a reference (inputRef). When the button is clicked, it calls focusInput, which directly focuses the input field.

What Happens Without forwardRef?

If you create a component without using forwardRef, you’ll encounter certain limitations. Here’s an example to illustrate this:

import React, { useRef } from 'react';

const CustomInput = ({ placeholder }) => {
  return <input placeholder={placeholder} />;
};

const ParentComponent = () => {
  const inputRef = useRef();

  const focusInput = () => {
    // This will NOT work
    inputRef.current.focus(); // Will throw an error
  };

  return (
    <>
      <CustomInput ref={inputRef} placeholder="Type here" />
      <button onClick={focusInput}>Focus Input</button>
    </>
  );
};

export default ParentComponent;

Implications of Not Using forwardRef:

Limited Access: You won’t have direct access to the input's DOM node, making tasks like focusing the input impossible. 2.** Increased Complexity**: You may need to pass props through multiple layers of components, leading to prop drilling.
Reduced Reusability: The component becomes less flexible and harder to integrate with libraries requiring refs.
Performance Considerations: Using forwardRef can enhance performance in scenarios requiring direct DOM access. By leveraging refs, you can avoid unnecessary re-renders and maintain a clean component tree, leading to improved application performance.

Conclusion

forwardRef is an essential tool in the React developer's toolkit, enabling the creation of flexible, reusable components. By allowing direct access to DOM nodes and facilitating integration with third-party libraries, it enhances component architecture. Embracing forwardRef can lead to cleaner code and improved functionality in your applications. As you continue to build with React, remember to leverage this powerful feature for optimal component design!

The Battle of State Management: Redux vs Zustand

Pratik Singh — Sun, 21 Apr 2024 16:20:17 +0000

The Importance of State Management in React

State management plays a pivotal role in React applications, orchestrating the flow of data between components and ensuring a seamless user experience. As projects evolve and complexity escalates, developers seek robust solutions to manage state effectively. In this blog post, we'll explore two prominent state management libraries in the React ecosystem: Redux and Zustand. We'll delve into their respective strengths, compare their approaches, and guide you in selecting the optimal solution for your project.

Real-World State Management: A Snapshot

In the dynamic landscape of web development, state management practices vary widely based on project requirements, team expertise, and performance considerations. While Redux has long been revered as the go-to solution for managing state in large-scale applications, the emergence of Zustand introduces a lightweight alternative tailored for smaller projects or specific components with localized state needs. However, the question persists: do we truly need Redux in every React application?

The Case for Redux: Pros and Cons

Redux offers a predictable state container, centralizing application state in a single store and facilitating organized data access. Its strict unidirectional data flow simplifies debugging and testing, while its extensive community support and ecosystem of libraries bolster its appeal. Nonetheless, Redux's reliance on boilerplate code and its steep learning curve may deter developers, particularly those embarking on smaller projects or new to state management.

Redux: The Predictable State Container

Pros:

1. Centralized State Management: Redux stores the application state in a single store, simplifying maintenance and access to data.

2. Predictable State Changes: Redux follows a strict unidirectional data flow, easing debugging and testing processes.

3. Large Community Support: With a vast community and an extensive ecosystem of libraries and tools, Redux offers robust support for developers.

Cons:

1. Boilerplate Code: Implementing Redux often involves writing a significant amount of boilerplate code, potentially increasing development time.

2. Steep Learning Curve: Redux's concepts, such as reducers and actions, may pose challenges for beginners, requiring time to grasp effectively.

Redux Toolkit: Streamlining Redux Development

Redux Toolkit simplifies Redux development by abstracting away much of the boilerplate code. Let's see how it manages the shopping cart scenario:

// Redux Toolkit slice for managing the shopping cart
import { createSlice } from '@reduxjs/toolkit';

const shoppingCartSlice = createSlice({
  name: 'shoppingCart',
  initialState: {
    items: [],
  },
  reducers: {
    addItem: (state, action) => {
      state.items.push(action.payload);
    },
    removeItem: (state, action) => {
      state.items.splice(action.payload, 1);
    },
  },
});

export const { addItem, removeItem } = shoppingCartSlice.actions;

// Redux store setup using Redux Toolkit
import { configureStore } from '@reduxjs/toolkit';

const store = configureStore({
  reducer: shoppingCartSlice.reducer,
});

// Component using the Redux store
function ShoppingCart() {
  const items = useSelector((state) => state.shoppingCart.items);
  const dispatch = useDispatch();

  const handleAddItem = (item) => {
    dispatch(addItem(item));
  };

  const handleRemoveItem = (index) => {
    dispatch(removeItem(index));
  };

  return (
    <div>
      <h2>Shopping Cart</h2>
      <ul>
        {items.map((item, index) => (
          <li key={index}>
            {item.name} - ${item.price}
            <button onClick={() => handleRemoveItem(index)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

In Redux Toolkit, updates to the state occur asynchronously through actions dispatched to reducers. The UI reflects these changes once the state has been updated accordingly.

Zustand: A Simple State Management Solution

Zustand, a lightweight library, simplifies state management with an intuitive API and synchronous updates, contrasting Redux's centralized store. Its straightforward approach enhances predictability and eases debugging. Ideal for beginners and small projects, Zustand minimizes boilerplate code and offers a shallow learning curve, prioritizing simplicity and ease of use.

Pros:

1. Minimal Setup: Zustand requires less boilerplate code compared to Redux, enabling quick and easy setup.

2. Lightweight: With a focus on performance, Zustand is a small library suitable for smaller projects, contributing to faster load times.

3. Easy Integration: Zustand seamlessly integrates with other state management solutions like Redux or MobX, offering flexibility in application architecture.

Cons:

1. Limited Ecosystem: Zustand's ecosystem may lack the breadth and depth of Redux, resulting in fewer third-party tools and libraries.

2. Not Suitable for Complex Applications: Due to its simplicity, Zustand may not be ideal for managing state in large, intricate applications where more comprehensive solutions like Redux are better suited.

Unlocking Zustand's Potential: Synchronous Nature and Beyond

One notable aspect distinguishing Zustand is its synchronous nature, enabling direct state mutation and immediate UI updates. This synchronous behavior contrasts with Redux's more asynchronous approach, offering developers greater control over state changes and rendering optimizations.

// Example Zustand store for managing the shopping cart
import create from 'zustand';

const useShoppingCartStore = create((set) => ({
  items: [],
  addItem: (item) => set((state) => ({ items: [...state.items, item] })),
  removeItem: (index) => set((state) => ({ items: state.items.filter((_, i) => i !== index) })),
}));

// Component using the Zustand store
function ShoppingCart() {
  const items = useShoppingCartStore((state) => state.items);
  const addItem = useShoppingCartStore((state) => state.addItem);
  const removeItem = useShoppingCartStore((state) => state.removeItem);

  return (
    <div>
      <h2>Shopping Cart</h2>
      <ul>
        {items.map((item, index) => (
          <li key={index}>
            {item.name} - ${item.price}
            <button onClick={() => removeItem(index)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

Choosing the Right Solution: Redux vs Zustand

When navigating the Redux vs Zustand dilemma, consider the unique requirements of your project. Redux excels in large-scale applications demanding strict data flow and standardized practices, making it an ideal choice for enterprise-level endeavors. Conversely, Zustand shines in smaller projects prioritizing simplicity and performance, offering a lightweight alternative with minimal setup overhead.

Conclusion: Making an Informed Decision

When choosing between Redux and Zustand, it's crucial to consider the specifics of your project. Zustand's smaller size and minimalist design naturally lead to less boilerplate code. This streamlined approach boosts developer productivity, enhances code readability, and promotes long-term project scalability.

While Redux enjoys widespread adoption, it's essential to assess the trade-offs between Redux and Zustand carefully. Redux may be suitable for certain applications, but Zustand's simplicity, performance benefits, ease of testing, and code conciseness make it a compelling alternative for many developers and projects.

In my view, embracing Zustand's simplicity and efficiency can offer significant advantages, especially for smaller projects or teams seeking streamlined state management. However, your decision should consider your project's unique needs, your team's expertise, and long-term scalability. By conducting a thorough evaluation, you can confidently select the state management solution that best fits your project goals.

Enhancing React App Security: Implementing Inactivity Logout for Peace of Mind

Pratik Singh — Sun, 21 Apr 2024 12:36:19 +0000

In many web applications, it's crucial to ensure security by automatically logging users out after a period of inactivity. This feature becomes especially important for sensitive applications like financial platforms. In this tutorial, we'll explore how to implement an inactivity logout feature in a React application using JavaScript

Prerequisites:

Before diving into the implementation, make sure you have a basic React application set up with user authentication. We'll build upon this existing setup to incorporate the inactivity logout feature.

1. The Watchtower: InactivityLogoutTimer Component

This is the heart of our security setup. The InactivityLogoutTimer component keeps an eye on things and logs users out if they've been inactive for too long.

// Inside InactivityLogoutTimer.jsx
const InactivityLogoutTimer = () => {
    // Functions to check for inactivity and update expiry time...
};

2. Watching for Inactivity

Here, we'll dive into how we check if a user has been idle for too long and needs to be logged out.

 const checkForInactivity = () => {
        const expireTimeString = localStorage.getItem('expireTime');
        const expireTime = expireTimeString ? parseInt(expireTimeString) : 0;

        if (expireTime < Date.now() && location.pathname !== '/') {
            localStorage.removeItem('token');
            navigate('/');
        }
    };

3. Keeping Time: Updating Expiry

We'll make sure user sessions expire after a set period to keep things secure.

    const updateExpiryTime = () => {
        const expireTime = Date.now() + 2 * 60 * 60 * 1000; // 2 hours in milliseconds
        localStorage.setItem('expireTime', expireTime.toString());
    };

4. Standing Guard: Setting Event Listeners

To keep an eye on user activity, we'll set up listeners for mouse movements, clicks, and other actions.

useEffect(() => {
    const events = ['click', 'keypress', 'scroll', 'mousemove'];

    const update = () => {
        updateExpiryTime();
    };

    events.forEach(event => window.addEventListener(event, update));

    return () => {
        events.forEach(event => window.removeEventListener(event, update));
    };
}, []);

5. Putting It All Together

Once we've got all our pieces in place, we'll integrate everything into our React app. This will make sure our users stay safe without any hassle.

import { useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';

const InactivityLogoutTimer = () => {
    const location = useLocation();
    const navigate = useNavigate();

    const checkForInactivity = () => {
        const expireTimeString = localStorage.getItem('expireTime');
        const expireTime = expireTimeString ? parseInt(expireTimeString) : 0;

        if (expireTime < Date.now() && location.pathname !== '/') {
            localStorage.removeItem('token');
            navigate('/');
        }
    };

    const updateExpiryTime = () => {
        const expireTime = Date.now() + 2 * 60 * 60 * 1000; // 2 hours in milliseconds
        localStorage.setItem('expireTime', expireTime.toString());
    };

    useEffect(() => {
        const interval = setInterval(() => {
            checkForInactivity();
        }, 5000); // Check for inactivity every 5 seconds

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

useEffect(() => {
    const events = ['click', 'keypress', 'scroll', 'mousemove'];

    const update = () => {
        updateExpiryTime();
    };

    events.forEach(event => window.addEventListener(event, update));

    return () => {
        events.forEach(event => window.removeEventListener(event, update));
    };
}, []);

    return null; 
};

export default InactivityLogoutTimer;

Conclusion: Keep Your Fortress Safe

By adding automatic logout to your React app, you're taking a big step towards keeping your users' data secure. Let's keep building strong defenses and make the web a safer place for everyone.

Forem: Pratik Singh

50 Shades of React: Questions to Prepare for the Interview Battle

Essential JavaScript Interview Questions You Should Know

Understanding forwardRef in React: A Comprehensive Guide

What is forwardRef?

Why Use forwardRef?

Syntax Overview

The Battle of State Management: Redux vs Zustand

Enhancing React App Security: Implementing Inactivity Logout for Peace of Mind

What is `forwardRef`?

Why Use `forwardRef`?