Cognizant React Js Frontend Developer Interview Questions and Answers

Redux is a predictable state container for JavaScript apps.

• Redux is a state management library for JavaScript applications.

• It helps in managing the state of the application in a predictable way.

• Redux stores the entire state of the application in a single immutable object.

• Actions are dispatched to update the state, and reducers specify how the state changes in response to actions.

• Redux is commonly used with React to man...read more

Virtual DOM is a lightweight copy of the actual DOM in memory, used by React to improve performance by minimizing actual DOM manipulations.

• Virtual DOM is a concept where a lightweight copy of the actual DOM is kept in memory.

• React uses Virtual DOM to improve performance by minimizing actual DOM manipulations.

• When state changes in a React component, a new Virtual DOM representation is created and compared with the previ...read more

useMemo is used for memoizing expensive calculations, while React.memo is used for memoizing functional components.

• useMemo is a hook used to memoize expensive calculations and only recompute the value when the dependencies change.

• React.memo is a higher order component used to memoize functional components and prevent unnecessary re-renders.

• useMemo is typically used for optimizing performance by caching values, while Re...read more

map returns a new array with modified elements, forEach does not return anything and just iterates over the array.

• map returns a new array with the results of calling a provided function on every element in the array.

• forEach executes a provided function once for each array element without returning anything.

• Example: const numbers = [1, 2, 3]; const doubled = numbers.map(num => num * 2); // doubled will be [2, 4, 6]; num...read more

Find duplicates in an array of strings

• Iterate through the array and use a hash map to keep track of the frequency of each element

• If an element is already in the hash map, it is a duplicate

Currying is a technique in functional programming where a function with multiple arguments is transformed into a sequence of functions, each taking a single argument.

• Currying helps in creating reusable functions and improving code readability.

• It allows partial application of functions, where some arguments are fixed and others are left to be provided later.

• Example: const add = (a) => (b) => a + b; add(2)(3) will return...read more

React lifecycle methods are hooks that allow developers to run code at specific points in a component's lifecycle.

• componentDidMount: Invoked immediately after a component is mounted. Ideal for API calls.

• componentDidUpdate: Invoked immediately after updating occurs. Useful for responding to prop or state changes.

• componentWillUnmount: Invoked immediately before a component is unmounted and destroyed. Good for cleanup tas...read more

The Virtual DOM is a lightweight representation of the actual DOM, enabling efficient updates and rendering in React applications.

• The Virtual DOM is a JavaScript object that mirrors the structure of the real DOM.

• React uses the Virtual DOM to optimize rendering by minimizing direct manipulations of the real DOM.

• When a component's state changes, React creates a new Virtual DOM tree and compares it with the previous one u...read more

A Higher Order Component (HOC) is a function that takes a component and returns a new component with additional functionality.

• HOCs are used to share code between components, add additional features, or modify behavior.

• They are commonly used for tasks like authentication, logging, and data fetching.

• Example: const withAuth = (WrappedComponent) => { return class extends React.Component { render() { return read more

A custom hook is a reusable function that allows you to extract component logic into a separate function.

• Custom hooks start with 'use' keyword.

• Custom hooks can call other hooks if needed.

• Custom hooks can be shared and reused across multiple components.

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

• A closure function can access variables from its outer scope even after the outer function has finished executing.

• Closures are commonly used to create private variables in JavaScript.

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