ITC Infotech Reactjs Developer Interview Questions and Answers

Q1. React Component updates promises in js fetch and axios api redux architecture redux reducers
Add your answer

Q1. All Basic questions related DOM, Virtual dom, DOM Manipulation, Redux Thunk saga, data flow, CSS different question like different way to place element in center, DOM node space, hidden/none different. In...read more
Add your answer

Q1. What is key in react
Ans. 
In React, keys are unique identifiers for elements in a list, helping React optimize rendering and updates.
• Keys help React identify which items have changed, are added, or are removed.

• They should be unique among siblings but can be reused across different lists.

• Using indexes as keys can lead to issues with component state and performance.

• Example: <Component key={item.id} /> where item.id is a unique identifier.
Answered by AI
Add your answer
Q2. When the components rerender in react js
Ans. 
Components in React re-render when state or props change, or when a parent component re-renders.
• 1. State Change: When a component's state is updated using setState, it triggers a re-render. Example: <MyComponent state={this.state} />.

• 2. Props Change: If a parent component passes new props to a child, the child re-renders. Example: <ChildComponent prop={newValue} />.

• 3. Context Change: If a component subscrib...read more
Answered by AI
Add your answer
Q3. How much virtual DOM required in react js
Ans. 
The virtual DOM in React is essential for optimizing UI updates, improving performance by minimizing direct DOM manipulation.
• Performance Optimization: The virtual DOM allows React to batch updates and minimize direct interactions with the actual DOM, which is slower.

• Efficient Reconciliation: React compares the virtual DOM with the real DOM to determine the minimal number of changes needed, enhancing rendering speed.

• Exa...read more
Answered by AI
Add your answer
Q4. What is denouncing and throttling in javascript
Ans. 
Debouncing and throttling are techniques to control the rate of function execution in JavaScript, improving performance.
• Debouncing: Delays execution until after a specified wait time has passed since the last invocation.

• Example of debouncing: A search input that waits for 300ms after the user stops typing before sending a request.

• Throttling: Ensures a function is executed at most once in a specified time interval, rega...read more
Answered by AI
Add your answer
Q5. What is redux and explain its flow
Ans. 
Redux is a predictable state container for JavaScript apps, enabling centralized state management and unidirectional data flow.
• Redux consists of three core principles: Single Source of Truth, State is Read-Only, and Changes are Made with Pure Functions.

• The flow of Redux can be summarized in four steps: Action, Reducer, Store, and View.

• An Action is a plain JavaScript object that describes a change in the application sta...read more
Answered by AI
Add your answer
Q6. What is state and props
Ans. 
State and props are core concepts in React for managing data and component behavior.
• State is a mutable object that holds data specific to a component.

• Props (short for properties) are immutable data passed from parent to child components.

• State can be updated using the setState method, while props are read-only.

• Example of state: <Component state={{ count: 0 }} />; state can change with user interaction.

• Example of p...read more
Answered by AI
Add your answer
Q7. Write program to get count to each char from string in javascript with reduce method
Ans. 
Use the reduce method in JavaScript to count occurrences of each character in a string efficiently.
• Reduce Method: The reduce method executes a reducer function on each element of the array, resulting in a single output value.

• Character Counting: By iterating over each character in the string, we can maintain a count of occurrences in an object.

• Example: For the string 'hello', the output would be { h: 1, e: 1, l: 2, o: 1...read more
Answered by AI
Add your answer
Q8. Write a program to get flatten array without falt method in javascript
Ans. 
Flattening an array in JavaScript without using the flat method can be achieved using recursion or iteration.
• Use recursion to iterate through each element and check if it's an array. Example: `function flatten(arr) { return arr.reduce((acc, val) => Array.isArray(val) ? acc.concat(flatten(val)) : acc.concat(val), []); }`

• Utilize a loop to push elements into a new array. Example: `function flatten(arr) { let result = [...read more
Answered by AI
Add your answer
Q9. Difference in graphQL api and rest api
Ans. 
GraphQL offers a flexible query structure, while REST uses fixed endpoints for data retrieval.
• GraphQL allows clients to request only the data they need, reducing over-fetching. For example, a client can request just the user's name and email.

• REST APIs have fixed endpoints that return predefined data structures. For instance, a GET request to /users always returns a full user object.

• GraphQL uses a single endpoint for al...read more
Answered by AI
Add your answer
Q10. What is context in react
Ans. 
Context in React allows for sharing values between components without prop drilling.
• Context provides a way to pass data through the component tree without having to pass props down manually at every level.

• It is created using React.createContext() which returns a Context object.

• Components can subscribe to this Context object to read its current value using the useContext hook or Context.Consumer.

• Example: const MyContext...read more
Answered by AI
Add your answer
Q11. How to do code splitting in react
Ans. 
Code splitting in React allows loading parts of an application on demand, improving performance and reducing initial load time.
• Use React.lazy() to dynamically import components: `const LazyComponent = React.lazy(() => import('./LazyComponent'));`

• Wrap lazy-loaded components with Suspense to handle loading states: `<Suspense fallback={<div>Loading...</div>}><LazyComponent /></Suspense>`.

• I...read more
Answered by AI
Add your answer
Q12. What is event looping in javascript
Ans. 
Event looping in JavaScript manages asynchronous operations, allowing non-blocking execution of code.
• JavaScript is single-threaded, meaning it can execute one command at a time.

• The event loop allows JavaScript to perform non-blocking I/O operations by using a callback queue.

• When an asynchronous operation completes, its callback is pushed to the queue, waiting for the call stack to be empty.

• Example: setTimeout(() => ...read more
Answered by AI
Add your answer
Q13. How to unmount the components in react
Ans. 
Unmounting components in React involves removing them from the DOM, typically during component lifecycle events.
• Use the componentWillUnmount lifecycle method in class components to perform cleanup tasks.

• In functional components, use the useEffect hook with a return function to handle cleanup.

• Example: In a class component, you can clear timers or cancel network requests in componentWillUnmount.

• Example: In a functional c...read more
Answered by AI
Add your answer
Q14. How to pass the data from child to parent in react js
Ans. 
In React, data can be passed from child to parent using callback functions as props.
• Define a function in the parent component that will handle the data.

• Pass this function as a prop to the child component.

• In the child component, call the function with the data you want to send.

• The parent component can then access the data through the function's parameters.

• Example: In Parent, define 'handleData = (data) => { console.l...read more
Answered by AI
Add your answer

Q1. ES6 features, let var const, closures
Add your answer
Q2. React coding question counter
Ans. 
Create a simple counter component in React that increments and decrements a value.
• Use useState to manage the counter state: const [count, setCount] = useState(0);

• Create buttons for incrementing and decrementing the count: <button onClick={() => setCount(count + 1)}>Increment</button>

• Display the current count: <p>Current Count: {count}</p>

• Ensure to handle edge cases, like preventing negative c...read more
Answered by AI
Add your answer

React and Javascript

Coding test with technical discussion

Q1. JavaScript coding questions
Add your answer
Q2. React coding questions
Add your answer

Q1. Explain about Event Loop
Ans. 
Event Loop is a mechanism in JavaScript that allows asynchronous operations to be executed in a non-blocking way.
• Event Loop is responsible for handling the execution of code, callbacks, and I/O operations in JavaScript.

• It continuously checks the call stack for any pending tasks and executes them in a sequential manner.

• Event Loop ensures that the JavaScript engine is not blocked by long-running tasks, allowing for a smo...read more
Answered by AI
Add your answer
Q2. Explain about Promises in Javascript
Ans. 
Promises in JavaScript are objects representing the eventual completion or failure of an asynchronous operation.
• Promises are used to handle asynchronous operations in JavaScript.

• They can be in one of three states: pending, fulfilled, or rejected.

• Promises can be chained using .then() to handle success and .catch() to handle errors.

• Example: const myPromise = new Promise((resolve, reject) => { ... });
Answered by AI
Add your answer