Vanilla Networks React Js Frontend Developer Interview Questions and Answers

Q1. What is closuer? is normal function call as closuer or not
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 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
Answered by AI
Add your answer
Q2. What is asyn/await
Ans. 
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
Answered by AI
Add your answer
Q3. Remove duplicate from array
Ans. 
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)];
Answered by AI
Add your answer
Q4. Hoe does react Dom update?
Ans. 
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.
Answered by AI
Add your answer
Q5. What is react hooks explain some
Ans. 
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.
Answered by AI
Add your answer
Q6. What is call bind apply?
Ans. 
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.
Answered by AI
Add your answer
Q7. What is difference b/w redux and redux toolkit
Ans. 
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
Answered by AI
Add your answer
Q8. Write a RTL test to check the button
Ans. 
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
Answered by AI
Add your answer
Q9. What inline level and block level elements
Ans. 
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>.
Answered by AI
Add your answer
Q10. Explain microtasks in js
Ans. 
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
Answered by AI
Add your answer
Q11. Explain customhooks
Ans. 
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.
Answered by AI
Add your answer
Q12. How to manage state using redux
Ans. 
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
Answered by AI
Add your answer
Q13. Explain redux work flow
Ans. 
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
Answered by AI
Add your answer

Q1. Output based javascript coding questions
Add your answer

Pretty easy when strong in logical

General coding questions

Q1. Communication checking
Add your answer

Q1. Coding and basics both asked
Add your answer

Q1. Coding and basics both asked
Add your answer

Q1. Fundamentals of react js, Advanced Javascript, Html , CSS
Add your answer

Q1. Logical questions from Javascript, Focused on problem-solving skills.
Add your answer

Q1. Past project discussion, skill-set check.
Add your answer

Q1. 1. Javascript data types, 2.Typeof of null and undefined and difference between null and undefined. 3. Class component vs Functional Component. 4. Sum of all array items. 5. Print prime number 1 to 100.
Add your answer

Easy interview about react js and redux . asked write code to fetch api and do some routing