100 React JS Interview Questions and Answers for Freshers

100 React JS Interview Questions and Answers for Freshers

Explore React JS interview questions and answers for freshers. Learn key concepts like components, hooks, JSX, Redux

1. What is React?

• Answer: React is a JavaScript library for building user interfaces, primarily for single-page applications. It allows you to create reusable UI components.

2. What are components in React?

• Answer: Components are the building blocks of a React application. They are reusable pieces of code that define part of the UI.

3. What is JSX in React?

• Answer: JSX is a syntax extension for JavaScript. It allows you to write HTML elements in JavaScript code, making React code easier to read and write.

4. What is the Virtual DOM?

• Answer: The Virtual DOM is a lightweight copy of the actual DOM. React uses it to improve performance by updating only the necessary parts of the UI.

5. What is the difference between state and props in React?

• Answer: State is used to store dynamic data that changes over time, while props are used to pass data from one component to another.

6. What are hooks in React?

• Answer: Hooks are special functions in React that let you use state and other features without writing a class. Examples include useState, useEffect, and useContext.

7. What is useState in React?

• Answer: useState is a hook that allows you to add state to functional components. It returns an array with the current state and a function to update it.

8. What is useEffect in React?

• Answer: useEffect is a hook used to perform side effects in functional components, like fetching data or updating the DOM.

9. What is a class component in React?

• Answer: A class component is a type of React component defined using ES6 class syntax. It can hold and manage state.

10. What is the difference between functional and class components?

• Answer: Functional components are simpler and don’t require the use of this or lifecycle methods. Class components have more features, including lifecycle methods and the ability to manage state.

11. What are lifecycle methods in React?

• Answer: Lifecycle methods are special methods in class components that are called at different stages of a component’s life, like componentDidMount, componentDidUpdate, and componentWillUnmount.

12. What is render method in React?

• Answer: The render method is used in class components to return the JSX that defines the UI.

13. What is conditional rendering in React?

• Answer: Conditional rendering allows you to render different UI elements based on certain conditions using JavaScript’s conditional operators (if, else, ternary, etc.).

14. What is React Router?

• Answer: React Router is a library used to handle navigation and routing in React applications. It allows you to navigate between different components or pages.

15. What is Redux in React?

• Answer: Redux is a state management library that helps you manage the application state in a predictable way, especially in large applications.

16. What is a higher-order component (HOC)?

• Answer: A higher-order component is a function that takes a component and returns a new component with additional props or functionality.

17. What is the purpose of the key prop in React?

• Answer: The key prop is used to identify elements in a list of React components. It helps React to efficiently update the UI when the list changes.

18. What is useContext in React?

• Answer: useContext is a hook that allows you to access the value of a React Context in a functional component.

19. What is a Context API in React?

• Answer: The Context API is a feature in React that allows you to share data between components without passing props down manually at every level.

20. What is the difference between useState and useReducer?

• Answer: useState is used for simple state management, while useReducer is more suited for managing complex state logic in React.

21. What are controlled components in React?

• Answer: Controlled components are components whose form elements (like input fields) are controlled by React state.

22. What are uncontrolled components in React?

• Answer: Uncontrolled components are components where the form elements maintain their own state, and React doesn’t directly manage the state.

23. What is a functional component?

• Answer: A functional component is a simpler type of React component defined as a JavaScript function. It can accept props and return JSX.

24. What is the useRef hook in React?

• Answer: useRef is a hook that allows you to persist values across renders and access DOM elements directly without causing re-renders.

25. What is React.Fragment?

• Answer: React.Fragment is a component that allows you to group multiple elements without adding extra nodes to the DOM.

26. What is Prop drilling in React?

• Answer: Prop drilling refers to the process of passing data from a parent component to a child component through multiple intermediate components.

27. What is the purpose of shouldComponentUpdate in React?

• Answer: shouldComponentUpdate is a lifecycle method used in class components to optimize performance by controlling whether a component should re-render.

28. What is the use of dangerouslySetInnerHTML in React?

• Answer: dangerouslySetInnerHTML is a property that allows you to insert raw HTML into a component. It should be used cautiously to prevent cross-site scripting (XSS) attacks.

29. What is a React Hook?

• Answer: A React Hook is a special function that allows you to use state, lifecycle methods, and other React features in functional components.

30. What is the purpose of useMemo in React?

• Answer: useMemo is a hook that helps optimize performance by memoizing the results of expensive calculations and reusing them unless the dependencies change.

31. What is useCallback in React?

• Answer: useCallback is a hook that returns a memoized version of a callback function, ensuring it doesn’t get recreated on every render.

32. How do you handle forms in React?

• Answer: In React, you handle forms by using controlled components, where the form elements are bound to the component’s state, or by using uncontrolled components.

33. What is a pure component in React?

• Answer: A PureComponent is a component that only re-renders when its props or state change, thus improving performance by preventing unnecessary renders.

34. What is the difference between componentWillMount and componentDidMount?

• Answer: componentWillMount is called before the component mounts, while componentDidMount is called after the component mounts.

35. What is the useLayoutEffect hook in React?

• Answer: useLayoutEffect is a hook that runs synchronously after all DOM mutations but before the browser has painted, ideal for reading layout and applying styles.

36. What is the Suspense component in React?

• Answer: Suspense is a component used to handle asynchronous loading of components in React, showing a fallback (like a loading spinner) until the component has finished loading.

37. What is React.memo?

• Answer: React.memo is a higher-order component that prevents re-rendering of a component if its props haven’t changed, thus improving performance.

38. What are fragments in React?

• Answer: Fragments allow you to group multiple elements without adding an extra node to the DOM, improving rendering performance.

39. What is the purpose of setState in React?

• Answer: setState is used to update the state in a class component and trigger a re-render of the component with the new state.

40. What is the use of React.StrictMode?

• Answer: React.StrictMode is a wrapper component that helps in identifying potential problems in an application by highlighting warnings during development.

41. What are some common performance optimization techniques in React?

• Answer: Techniques include using React.memo, lazy loading components, using the shouldComponentUpdate lifecycle method, and code splitting.

42. What is the purpose of useImperativeHandle in React?

• Answer: useImperativeHandle is a hook that allows you to customize the instance value that is exposed when using ref on a component.

43. What is the difference between == and === in JavaScript?

• Answer: == compares values with type conversion, while === compares both values and types, making === more reliable

for equality checks.

44. How do you update state in React?

• Answer: You update state in React using the setState function in class components or using the useState hook in functional components.

45. What are React Hooks rules?

• Answer: React hooks have rules like only using hooks at the top level of a component and only in functional components.

46. What is a React component lifecycle?

• Answer: The React component lifecycle includes phases like mounting, updating, and unmounting, which correspond to methods like componentDidMount and componentWillUnmount.

47. What is a callback function in React?

• Answer: A callback function in React is a function passed as a prop to child components, often used to pass data or trigger actions back to the parent component.

48. What is the useEffect dependency array?

• Answer: The dependency array in useEffect defines when the effect should run. If any value in the array changes, the effect will re-run.

49. What are React lifecycle methods?

• Answer: React lifecycle methods are methods like componentDidMount, componentDidUpdate, and componentWillUnmount that are invoked at specific points during a component’s life.

50. What are React PropTypes?

• Answer: PropTypes are a mechanism to ensure that the correct types of props are passed to a component, improving reliability and code quality.

ALSO READ : PHP vs Node.js: Which Is Better for Your Web App in 2025?

All News Information click here