LTIMindtree React Js Frontend Developer Interview Questions and Answers

A closure is a function that has access to its own scope, as well as the scope in which it was defined.

• A closure allows a function to access variables from its outer function even after the outer function has finished executing.

• Closures are created whenever a function is defined within another function.

• Example: function outerFunction() { let outerVar = 'I am outer'; return function innerFunction() { console.log(outerVa...read more

Async/await is a feature in JavaScript that allows for asynchronous code to be written in a synchronous manner.

• Async/await is built on top of promises and provides a more readable and concise way to work with asynchronous code.

• The 'async' keyword is used to define a function as asynchronous, allowing it to use the 'await' keyword inside it.

• When 'await' is used, it pauses the execution of the function until the promise ...read more

Use Set to remove duplicates from array of strings.

• Create a Set from the array to automatically remove duplicates

• Convert the Set back to an array if needed

• Example: const arr = ['apple', 'banana', 'apple', 'orange']; const uniqueArr = [...new Set(arr)];

React DOM updates by comparing the virtual DOM with the actual DOM and only updating the necessary components.

• React creates a virtual DOM to represent the UI components.

• When a state or prop changes, React re-renders the virtual DOM.

• React then compares the virtual DOM with the actual DOM to identify the differences.

• Only the necessary components are updated in the actual DOM, minimizing performance impact.

React Hooks are functions that let you use state and other React features without writing a class.

• React Hooks were introduced in React 16.8.

• They allow you to use state and other React features in functional components.

• Some commonly used hooks are useState, useEffect, useContext, and useRef.

• Hooks make it easier to reuse logic across components.

• Hooks can be used to manage component state, perform side effects, and more.

Call, bind, and apply are methods used to manipulate the value of 'this' in JavaScript functions.

• Call - invokes a function with a specified 'this' value and arguments provided individually.

• Bind - creates a new function that, when called, has its 'this' keyword set to the provided value.

• Apply - invokes a function with a specified 'this' value and arguments provided as an array.

Redux Toolkit is a set of tools and best practices to simplify Redux development, while Redux is a predictable state container for JavaScript apps.

• Redux Toolkit provides a set of tools like createSlice, createAsyncThunk, and configureStore to simplify Redux setup and reduce boilerplate code.

• Redux Toolkit includes immer library for writing immutable update logic in a more convenient way.

• Redux Toolkit also includes a def...read more

Writing a RTL test to check a button in React

• Use the render and fireEvent functions from @testing-library/react

• Find the button element using getByRole('button')

• Simulate a click event using fireEvent.click

• Assert that the button is visible and clickable

Inline and block level elements are two types of HTML elements with different display behaviors.

• Inline elements flow in the same line as surrounding content, while block level elements take up the full width available.

• Examples of inline elements include <span>, <a>, and <strong>.

• Examples of block level elements include <div>, <p>, and <h1>.

Microtasks in JavaScript are tasks that are executed asynchronously and have higher priority than regular tasks.

• Microtasks are scheduled to run after the current script has finished but before the browser has a chance to render.

• They are often used with promises, as promise callbacks are executed as microtasks.

• Microtasks are executed in the same event loop iteration as regular tasks, but before the next rendering.

• Exampl...read more

Custom hooks are reusable functions that allow you to extract component logic into separate functions.

• Custom hooks are prefixed with 'use' and can call other hooks if needed.

• They can be used to share logic between components without duplicating code.

• Custom hooks can be created for any kind of logic, such as fetching data, managing state, or handling side effects.

Redux is a predictable state container for JavaScript apps. It helps manage the state of an application in a centralized store.

• Create a Redux store to hold the state of the application

• Define actions to describe state changes

• Write reducers to specify how the state changes in response to actions

• Dispatch actions to update the state in the store

• Connect components to the Redux store using the connect function from react-red...read more

Redux is a predictable state container for JavaScript apps.

• Actions are dispatched to the store

• Reducers specify how the state changes in response to actions

• Store holds the state of the application

• Components can subscribe to the store to access state

Actual DOM represents the real structure of the web page, while Virtual DOM is a lightweight copy used for efficient updates.

• Actual DOM is the real structure of the web page that is directly manipulated by the browser.

• Virtual DOM is a lightweight copy of the Actual DOM that React uses for efficient updates.

• Changes made to the Virtual DOM are compared with the Actual DOM, and only the differences are updated in the Actu...read more

The expression evaluates to 'string' due to the double application of the typeof operator.

• typeof 1 returns 'number', as 1 is a number.

• Applying typeof again: typeof 'number' returns 'string', since 'number' is a string.

• The final output of console.log(typeof typeof 1) is 'string'.