100 React Interview questions 2024.pptx.pdf
- 1. What is react js ? React is an open-source JavaScript library developed for building user interfaces, particularly for single-page applications.
- 2. what are the major features of react? Virtual DOM: React uses a virtual DOM to improve performance by minimizing direct DOM manipulations. JSX: JSX stands for JavaScript XML, which allows writing HTML in React components. Components: React is component-based, meaning the UI is built using reusable components. One-way Data Binding: Data flows in one direction, making the application easier to understand and debug. High Performance: React optimizes updates by using a virtual DOM and efficiently re-rendering components. Unidirectional Data Flow: Data flows in a single direction, which provides better control over the entire application.
- 3. Rendering What is virtual DOM and how it works ? Virtual DOM is a lightweight, in-memory representation of the real DOM elements generated by React components. React keeps a copy of the actual DOM structure in memory, called the Virtual DOM, and uses it to optimize updates and rendering. Updating Diffing Algorith m Batch Updates Reconciliation
- 4. Class Based Components What are components in react ? Components are the building blocks of a React application. They are reusable pieces of UI that can be nested, managed, and handled independently. Functional Components
- 5. Explain Class components with example
- 6. Explain functional components with example
- 7. What is JSX ? JSX stands for JavaScript XML. It allows us to write HTML elements in JavaScript and place them in the DOM without using methods like createElement() or appendChild().
- 8. How to export and import components ? We can export components using export default or named exports, and import them using import.
- 9. How to use nested components ?
- 10. What is state in react ? In React, state is an object that represents the parts of the app that can change. Each component can have its own state, which can be managed within the component and used to render the UI. When the state changes, React re-renders the component to reflect the new state.
- 11. What is state in react ?
- 12. How to update state in react ? State in React is updated using the setState method in class components or the useState hook in functional components.
- 13. What is setState callback ? The setState method can accept a callback function as the second argument, which is executed once the state has been updated and the component has re- rendered.
- 14. Why you should not update state directly , explain with example Updating state directly does not trigger a re-render of the component, leading to inconsistencies in the UI. Instead, always use setState or state hooks.
- 15. What are props in react ? Props are used to pass data and event handlers to child components. Props ensure a one-way data flow, from parent to child. Props cannot be modified by the child component that receives them.
- 16. What is difference between state and props ? State is a built-in object used to store data that may change over the lifecycle of a component. It is managed within the component itself. State is mutable. It can be updated using the setState method in class components or the useState hook in functional components. State is local to the component and cannot be accessed or modified by child components. Props (short for properties) are used to pass data from a parent component to a child component. They are read-only and immutable within the child component. Props are immutable. Once passed to a child component, they cannot be modified by the child. Props are passed from a parent component to a child component and can be accessed by the child.
- 17. What is lifting state up in react ? Lifting State Up is a pattern in React where state is moved up to the closest common ancestor of components that need to share that state. Single Source of Truth: By managing the state in the parent component, you ensure that the state is consistent across multiple child components. Simplified State Management: The state logic is centralized, making it easier to maintain and debug.
- 18. What is children prop in react ? The children prop is a special property in React used to pass the content that is nested inside a component.
- 19. What is defaultProps in React? defaultProps is used to set default values for the props in a component.
- 20. What are fragments in react and its advantages ? Fragments allow you to group multiple elements without adding extra nodes to the DOM.
- 21. How to use styling in react js ? We can use inline styles, CSS stylesheets, or CSS-in-JS libraries like styled- components.
- 22. How can you conditionally render components in React? We can use JavaScript conditional operators (like if, &&, ? :) to conditionally render components.
- 23. How to render list of data in react ? We can use the map function to iterate over an array and render each item.
- 24. What is key prop ? The key prop is a unique identifier for each element in a list, used by React to identify which items have changed, are added, or removed.
- 25. Why indexes for keys are not recommended ? Using indexes as keys can lead to performance issues and unexpected behavior when list items are reordered or removed. Keys should be unique and stable.
- 26. How to handle buttons in react ?
- 27. How to handle inputs in react ? We can use controlled components where form data is handled by the component's state.
- 28. Explain lifecycle methods in react Lifecycle methods in React are special methods that get called at different stages of a component's lifecycle. Mounting: When a component is being inserted into the DOM. Updating: When a component's state or props change. Unmounting: When a component is being removed from the DOM.
- 29. What are the popular hooks in react and explain it’s usage ? useState: Manages state in functional components. useEffect: Manages side effects in functional components. useContext: Consumes context in functional components. useReducer: Manages state with a reducer function. For more complex state management useRef: Accesses DOM elements or stores mutable values. useCallback: performance improvement usecase useMemo: performance improvement usecase
- 30. What is useState and how to manage state using it ?
- 31. What is useEffect hook and how to manage side effects ? useEffect is a hook that manages side effects like data fetching, subscriptions, or manually changing the DOM.
- 32. How to implement data fetching in react js ?
- 33. How to manage loading state ?
- 34. What is prop drilling and how to avoid it ? Prop drilling occurs when you pass data through many layers of components. It can be avoided using the Context API or state management libraries like Redux.
- 35. What is the Context API in React, and why is it used? Context API in React provides a way to share values (like data or functions) between components without having to pass props through every level of the component tree. It is used to avoid prop drilling.
- 36. How do you consume context using the useContext hook? The useContext hook allows functional components to access context values directly.
- 37. How can you update context values?
- 38. How do you use multiple Contexts in a single component?
- 39. What are the advantages of using the Context API over prop drilling? Context API reduces the need for prop drilling, making the code more readable and maintainable. It allows for easy sharing of state and functions across the component tree without passing props through every level.
- 40. What is the useReducer hook, and when should you use it? The useReducer hook is used for state management in React. It is suitable for handling more complex state logic compared to useState.
- 41. Can you use useReducer with complex state objects?
- 42. How do you pass additional arguments to the reducer function?
- 43. How do you handle side effects with useReducer?
- 44. What is useRef hook ? The useRef hook is used to access and interact with DOM elements directly and to persist mutable values across renders without causing re-renders.
- 45. How can useRef be used to store mutable values? useRef can store any mutable value, and changes to the ref do not cause re- renders.
- 46. What is forwardRef and when would you use it? forwardRef is a function that allows you to pass refs through components to access DOM elements or child component instances.
- 47. How to manage forms in react ? Forms in React can be managed using controlled components where form data is handled by the component's state.
- 48. What are Custom Hooks and Why Do We Need Them? Custom Hooks in React are JavaScript functions that allow you to reuse stateful logic across multiple components. They enable you to extract and share common logic without repeating code, promoting code reusability and separation of concerns. Code Reusability: Custom hooks allow you to reuse stateful logic without duplicating code. Separation of Concerns: They help separate the logic from the component's structure, making the code more modular and easier to maintain. Cleaner Code: By moving common logic into custom hooks, components become cleaner and more focused on their core responsibilities.
- 49. Implement useFetch custom hook/Custom hook example ?
- 51. What is React Router DOM and why is it used? React Router DOM is a routing library built on top of React Router. It enables dynamic routing in web applications, allowing you to define routes and navigate between different components without reloading the page.
- 52. How do you create a basic route in React Router DOM? A basic route is created using the Route component, which maps a URL path to a specific element
- 53. How to implement basic routing using react router dom ?
- 54. How to create a link to another route using React Router DOM? Use the Link component to create navigation links.
- 55. How do you use URL parameters / Dynamic routing in React Router DOM?
- 56. How can you perform a redirect in React Router DOM? Use the Navigate component to perform a redirect.
- 57. What is a Routes component in React Router DOM ? The Routes component is used to define a set of routes, where only the first matching route is rendered.
- 58. How do you handle nested routes in React Router DOM?
- 59. How can you handle 404 errors (not found) in React Router DOM ? Use a Route without a path prop inside Routes to catch all unmatched routes.
- 60. How do you programmatically navigate using React Router DOM ? Use the useNavigate hook to navigate programmatically within your components.
- 61. Explain useCallback hook with example. The useCallback hook is used to memoize callback functions. This means that the function provided to useCallback will only be recreated if one of its dependencies has changed. This is particularly useful when passing callbacks to child components that are optimized with React.memo, as it can prevent unnecessary renders.
- 62. Explain useMemo hook with example. The useMemo hook is used to memoize expensive calculations so that they are not recalculated on every render. It takes a function to compute a value and an array of dependencies, and it only recomputes the value when one of the dependencies has changed.
- 63. Explain React.memo with example. React.memo is a higher-order component that memoizes the result of a component. It prevents the component from re-rendering unless the props have changed. This is useful for optimizing performance by avoiding unnecessary renders of pure components.
- 64. Explain the reconciliation process in React and how it works. Reconciliation is the process React uses to update the DOM efficiently. It involves comparing the new virtual DOM with the previous one and determining the minimum number of changes needed to update the actual DOM.
- 65. What are Pure components ? PureComponent is a base class in React that implements shouldComponentUpdate with a shallow prop and state comparison. It helps prevent unnecessary re-renders by ensuring that the component only re-renders when there are actual changes in props or state.
- 66. Explain higher order component with example. A Higher-Order Component (HOC) is a function that takes a component and returns a new component with added functionality. HOCs are used for reusing component logic and enhancing components with additional behavior.
- 67. What is redux , explain core principles. Redux is a predictable state container for JavaScript apps. Redux acts as a centralized store for state management in your application. Single Source of Truth: The state of the application is stored in a single object. State is Read-Only: The only way to change the state is to emit an action, an object describing what happened. Changes are made with Pure Functions: Reducers are pure functions that take the previous state and an action, and return the next state.
- 68. What are actions in Redux, explain with example? Actions are plain JavaScript objects that describe what happened in the application. They must have a type property that indicates the type of action being performed.
- 69. Explain reducers in Redux with an example. Reducers are pure functions that take the current state and an action, and return a new state based on the action type.
- 70. What is the role of the Redux store? The store holds the whole state tree of the application. It allows access to the state via getState(), dispatching actions via dispatch(action), and registering listeners via subscribe(listener).
- 71. How do you connect React components to Redux store using connect? The connect function connects a React component to the Redux store. It maps state and dispatch to the component's props.
- 72. How do you use the useSelector and useDispatch hooks in a functional React component? useSelector is used to access the Redux state, and useDispatch is used to dispatch actions in functional components.
- 73. What is Redux Toolkit? Redux Toolkit is an official, opinionated toolset for efficient Redux development. It simplifies store setup, reduces boilerplate, and includes useful tools like createSlice and createAsyncThunk.
- 74. How to configure store in redux toolkit ? Redux Toolkit is an official, opinionated toolset for efficient Redux development. It simplifies store setup, reduces boilerplate, and includes useful tools like createSlice and createAsyncThunk.
- 75. Explain createSlice in Redux Toolkit with an example. createSlice is a function that generates action creators and action types, and creates a reducer based on an object of "slice" reducers.
- 76. What are controlled components in React? Controlled components are React components where the form data is handled by the React state. The input's value is always driven by the React state.
- 77. What are uncontrolled components in React? Uncontrolled components are React components where the form data is handled by the DOM itself. The input's value is not driven by the React state.
- 78. How do you optimize performance in React applications? Using useMemo and useCallback to memoize expensive calculations and functions. Implementing shouldComponentUpdate or using React.memo for Pure Components. Code splitting and lazy loading.
- 79. What is code splitting in React? Code splitting is a feature supported by React that allows you to split your code into various bundles which can then be loaded on demand.
- 80. What are render props in React? Give an example. Render props are a technique for sharing code between React components using a prop whose value is a function. This function returns a React element and is used by the component to
- 81. What are portals in React? Portals provide a way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. This is useful for things like modals, tooltips, and overlays.
- 82. How do you implement lazy loading in React? Lazy loading in React can be implemented using the React.lazy and Suspense components. This allows you to load components on demand, improving initial load times.
- 83. How do you define props for a functional component in TypeScript?
- 84. How do you use the useState hook with TypeScript? We can define the type of the state variable by specifying it in the useState generic.
- 85. How do you type event handlers in React with TypeScript?
- 86. How do you handle optional props in React components with TypeScript? In TypeScript, you can handle optional props by using the ? operator in the props interface or type alias.
- 87. How do you use the useReducer hook with TypeScript?
- 88. How do you type the context API in React with TypeScript?
- 89. How do you write a simple test in Jest? Jest is a JavaScript testing framework maintained by Facebook. It is commonly used with React because it provides a simple and powerful testing solution with features like snapshot testing, coverage reporting, and built-in assertions.
- 90. How do you render a component for testing using React Testing Library?
- 91. How can you find elements in the DOM using React Testing Library?
- 92. How do you simulate user events in React Testing Library?
- 93. How can you test component props with React Testing Library?
- 94. Create a Controlled Input Component Build a controlled component called TextInput that renders an input field and a button. When the button is clicked, an alert should display the current input value.
- 95. Implement toggle Visibility of a Component
- 96. Fetch Data from an API and Display it , along with loading state
- 97. Create a Reusable Button Component with Props
- 98. Build a Component that Uses an Effect to Perform Cleanup.
- 99. Implement a Context with a Reducer for Global State Management
- 100. Build a Component with Conditional Rendering Based on Props.
- 101. Implement a simple form component