Infosys React Js Frontend Developer Interview Questions and Answers

Q1. What is Difference b/w class and functional component?
Ans. 
Class components use ES6 classes, while functional components are simpler functions. Both render UI but differ in syntax and features.
• Class components can hold and manage local state using 'this.state'. Example: 'this.setState({ count: this.state.count + 1 })'.

• Functional components are stateless by default but can use hooks (like useState) to manage state. Example: 'const [count, setCount] = useState(0)'.

• Class componen...read more
Answered by AI
Add your answer
Q2. What is Promise?
Ans. 
A Promise is an object representing the eventual completion or failure of an asynchronous operation in JavaScript.
• Promises can be in one of three states: pending, fulfilled, or rejected.

• A fulfilled promise returns a value, while a rejected promise returns an error.

• Example: const myPromise = new Promise((resolve, reject) => { /* async operation */ });

• You can handle the result of a promise using .then() for success an...read more
Answered by AI
Add your answer
Q3. What is hooks?
Ans. 
Hooks are functions that let you use state and lifecycle features in functional components in React.
• Hooks allow functional components to manage state without using class components. Example: useState hook.

• They enable side effects in functional components. Example: useEffect hook for data fetching.

• Custom hooks can be created to encapsulate reusable logic across components.

• Hooks follow a specific naming convention, start...read more
Answered by AI
Add your answer
Q4. What fragment in React?
Ans. 
Fragments in React allow grouping multiple elements without adding extra nodes to the DOM.
• Fragments are used to return multiple elements from a component without wrapping them in a div.

• Example: Instead of <div><Child1 /><Child2 /></div>, use <><Child1 /><Child2 /></>.

• They help in reducing unnecessary DOM elements, improving performance.

• You can use <React.Fragment> o...read more
Answered by AI
Add your answer
Q5. What is Foreach, Filter and map function?
Ans. 
Foreach, Filter, and Map are array methods in JavaScript for iterating and transforming data.
• forEach: Executes a provided function once for each array element. Example: [1, 2, 3].forEach(num => console.log(num));

• filter: Creates a new array with elements that pass a test. Example: [1, 2, 3, 4].filter(num => num > 2); // [3, 4]

• map: Creates a new array by applying a function to each element. Example: [1, 2, 3].ma...read more
Answered by AI
Add your answer
Q6. What is Jest ? Give an Example
Ans. 
Jest is a JavaScript testing framework designed for simplicity, focusing on unit testing and providing a rich API for assertions.
• Zero Configuration: Jest works out of the box for most JavaScript projects, requiring minimal setup to get started.

• Snapshot Testing: Jest allows you to take snapshots of your components and compare them during tests to ensure UI consistency.

• Mocking Functions: Jest provides built-in mocking ca...read more
Answered by AI
Add your answer
Q7. Suppose you are fetching 1000 of data from fetch API and it takes time to load. What technique you will use to reduce time?
Ans. 
To optimize data fetching in React, techniques like pagination, lazy loading, and caching can significantly reduce load times.
• Pagination: Instead of fetching all 1000 records at once, implement pagination to load data in chunks, e.g., 100 records per request.

• Lazy Loading: Load data only when needed, such as when a user scrolls down or navigates to a specific section of the app.

• Caching: Use caching mechanisms like local...read more
Answered by AI
Add your answer
Q8. Write a form with input field name and age and on submit form show data in console.
Ans. 
Create a simple React form to capture name and age, and log the data to the console on submission.
• Use functional components and hooks like useState for managing form state.

• Create a form with controlled components for input fields.

• Handle form submission with an onSubmit event handler.

• Use console.log to display the captured data in the console.
Answered by AI
Add your answer
Q9. Will you able to take responsibility if some project has to deliver in timeLine?
Add your answer
Q10. What is Difference b/w it and describe in Jest?
Ans. 
In Jest, 'describe' groups tests, while 'it' defines individual test cases.
• 'describe' is used to create a test suite, grouping related tests together.

• 'it' is used to define a single test case within a test suite.

• Example of 'describe': describe('Array methods', () => { ... });

• Example of 'it': it('should return the correct length', () => { ... });

• 'describe' can contain multiple 'it' blocks to test various scena...read more
Answered by AI
Add your answer

Q1. What is closure
Ans. 
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 an outer function 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); }; }
Answered by AI
Add your answer
Q2. What is webworkers
Ans. 
Web Workers are a way to run JavaScript code in the background, separate from the main thread of the web application.
• Web Workers allow for multi-threading in JavaScript, improving performance by offloading tasks to separate threads.

• They can be used for tasks like heavy calculations, image processing, or other CPU-intensive operations.

• Communication between the main thread and Web Workers is done through message passing.

• ...read more
Answered by AI
Add your answer
Q3. What is first class function and
Ans. 
A first class function is a function that can be treated like any other variable in a programming language.
• Can be passed as an argument to other functions

• Can be returned from other functions

• Can be assigned to variables

• Can be stored in data structures
Answered by AI
Add your answer
Q4. What is first paint and temporal dead zone
Ans. 
First paint refers to the time when the browser starts rendering pixels to the screen. Temporal dead zone is a period in JavaScript where a variable exists but cannot be accessed.
• First paint is the time when the browser starts rendering content on the screen.

• Temporal dead zone is a period in JavaScript where a variable is declared but cannot be accessed due to the variable being in an inaccessible state.

• Example: const ...read more
Answered by AI
Add your answer
Q5. What is callback, event deligaton, react reconcillaton, react life cycle methods
Ans. 
Callbacks, event delegation, React reconciliation, and React lifecycle methods are key concepts in React development.
• Callback functions are functions passed as arguments to be executed later, commonly used in event handling and asynchronous operations.

• Event delegation is a technique where a single event listener is attached to a parent element to manage events for multiple child elements.

• React reconciliation is the pro...read more
Answered by AI
Add your answer
Q6. Implementing redux
Ans. 
Implementing Redux in a React application involves several steps to manage state globally.
• Install Redux and React-Redux libraries using npm or yarn.

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

• Define reducers to specify how the state should change in response to actions.

• Dispatch actions to update the state in the Redux store.

• Connect React components to the Redux store using the connect function from React-...read more
Answered by AI
Add your answer

Q1. Create a table component from array of objects
Ans. 
Create a table component from array of objects in React JS
• Map through the array of objects to render rows in the table

• Use Object.keys() to dynamically generate table headers

• Utilize CSS for styling the table
Answered by AI
Add your answer
Q2. What is event loop
Ans. 
Event loop is a mechanism in JavaScript that allows for asynchronous operations to be executed in a non-blocking way.
• Event loop is responsible for handling the execution of code in a single-threaded environment.

• It continuously checks the call stack for any functions that need to be executed.

• If the call stack is empty, it looks at the task queue for any pending tasks to be executed.

• Event loop ensures that JavaScript rem...read more
Answered by AI
Add your answer

Discussion about javascript concepts

Coding for react components

Q1. Difference between props and data
Ans. 
Props are used to pass data from parent to child components in React, while data refers to the information stored within a component.
• Props are read-only and cannot be modified by the child component.

• Data is mutable and can be changed within the component.

• Props are passed down from parent to child components, while data is stored within the component itself.

• Example: Passing a 'name' prop from a parent component to a chi...read more
Answered by AI
Add your answer
Q2. Lifecycle methods
Add your answer

Q1. Describe your greatest Strength
Add your answer
Q2. Describe your greatest Weakness
Add your answer

50 minutes coding round they asked me some theoretical question and machine coding question they asked me DSA question