Questions React Flashcards
Questions about react and js focused on interviews
What is React js?
React.js is a JavaScript library used for building user interfaces, particularly for single-page applications. It allows developers to create reusable UI components that efficiently update and render based on data changes.
What is the difference between virtual DOM and the real DOM in React js?
The virtual DOM is a lightweight copy of the real DOM kept in memory. React uses it to compute the most efficient way to update the browser’s displayed DOM. This process minimizes actual DOM updates, which can be resource-intensive and slow.
What is a controlled and uncontrolled component in React js?
Controlled components are React components whose form elements (like input, textarea, select) are controlled by React via state. Uncontrolled components allow the form elements to manage their own state.
What are hooks in React js?
Hooks are functions that let you use React state and lifecycle features in functional components. Examples include useState for managing state and useEffect for handling side effects.
What is JSX, Babel, and Webpack?
JSX (JavaScript XML) is a syntax extension for JavaScript used with React to describe what the UI should look like. Babel is a tool that converts JSX and newer JavaScript features into widely supported ES5 code. Webpack is a module bundler that processes these files for web deployment.
What is Redux?
Redux is a predictable state container for JavaScript applications, commonly used with React for managing application state in a predictable and centralized manner.
What is a reducer, action, and store in Redux?
In Redux, a reducer is a pure function that takes the previous state and an action, and returns the next state. Actions are payloads of information that send data from your application to your Redux store. The store holds the complete state tree of the application.
What is middleware in Redux?
Middleware in Redux provides a third-party extension point between dispatching an action and the moment it reaches the reducer. It is commonly used for logging, crash reporting, or asynchronous API calls.
Explain the data flow in Redux
The data flow in Redux is unidirectional. Actions are dispatched to the store, which calls the reducer to update the state. The updated state then re-renders any connected React components.
What is Redux-Thunk?
Redux-Thunk is a middleware for Redux that allows you to write action creators that return a function instead of an action. This enables handling of asynchronous operations like API calls within Redux.
What is Redux-Saga, and what’s the difference between Redux-Thunk and Redux-Saga?
Redux-Saga is another Redux middleware used to handle side effects in a more structured way using ES6 Generators. Redux-Thunk uses functions, while Redux-Saga uses Generator functions, offering more complex control flow and capabilities.
Difference between class component and function component.
Class components are ES6 classes that extend from React.Component and have a state, lifecycle methods, and can hold local state. Function components are stateless and are simply JavaScript functions that take props as arguments and return JSX.
How can we implement componentWillUnmount in a function component?
You can use the useEffect hook in combination with a cleanup function to replicate componentWillUnmount behavior in function components. By returning a cleanup function from useEffect, you can perform cleanup tasks when the component is unmounted.
Explain useEffect, useState, useMemo, useCallback hooks in detail.
useEffect: Executes side effects in function components (e.g., data fetching, subscriptions) and replaces lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount.
useState: Allows function components to have local state.
useMemo: Memoizes the result of a function, avoiding unnecessary recalculations.
useCallback: Memoizes a callback function, preventing unnecessary re-renders of child components.
Explain lifecycle methods in React js.
Lifecycle methods are methods that are automatically invoked at different phases of a component’s lifecycle (e.g., mounting, updating, unmounting). Examples include componentDidMount, componentDidUpdate, and componentWillUnmount.
