If you're preparing for a React JS interview as a fresher, you've come to the right place. React is one of the most in-demand frontend frameworks in the world, and companies are always on the lookout for skilled developers. In this article, we've curated the Top 100 React JS Interview Questions and Answers specifically for freshers. These questions range from basic concepts to slightly advanced topics that interviewers often ask to test your understanding and practical knowledge.
🔹 Section 1: Basic React JS Interview Questions
1. What is React JS?
Answer: React JS is an open-source JavaScript library used for building user interfaces, especially single-page applications. It is maintained by Meta (formerly Facebook).
2. What are the main features of React?
i). JSX (JavaScript XML)
ii). Virtual DOM
iii). Component-based architecture
iv). Unidirectional data flow
v). Reusable components
3. What is JSX?
Answer: JSX stands for JavaScript XML. It allows you to write HTML code inside JavaScript. JSX makes code easier to read and write.
4. What is the Virtual DOM?
Answer: Virtual DOM is a lightweight copy of the real DOM. It helps React update the UI efficiently by comparing the current Virtual DOM with the previous one and updating only the changed elements.
5. What is the difference between Real DOM and Virtual DOM?
i). Real DOM
Updates slowly
Manipulates the entire DOM
Memory-intensive
ii). Virtual DOM
Updates quickly
Updates only changed parts
Lightweight and efficient
6. What are components in React?
Answer: Components are the building blocks of a React application. They split the UI into independent, reusable pieces. There are two types: Class Components and Functional Components.
7. What is the difference between Functional and Class components?
i). Functional Component
Uses functions
Uses hooks for state
Less code, simpler
Class Component
Uses ES6 classes
Uses this.state
More boilerplate code
8. How do you create a React app?
Answer: Using Create React App:
npx create-react-app my-app cd my-app npm start
9. What are props in React?
Answer: Props (short for properties) are used to pass data from one component to another, typically from parent to child.
10. What is state in React?
Answer: State is a built-in object that stores data about the component. When the state changes, the component re-renders.
🔹 Section 2: Intermediate-Level ReactJS Interview Questions and Answers
11. What is the use of useState() hook?
Answer: useState is a React hook used to manage local state in functional components.
const [count, setCount] = useState(0);
12. What is the useEffect hook?
Answer: useEffect lets you perform side effects in functional components, such as data fetching, subscriptions, or DOM updates.
13. What is prop drilling in React?
Answer: Prop drilling refers to the process of passing data through multiple layers of components, even when intermediate components don't need that data.
14. What is lifting state up?
Answer: Lifting state up means moving state to the nearest common ancestor of components that need to share data.
15. What is a controlled component?
Answer: A controlled component is a form element (like input or textarea) whose value is controlled by the React state.
16. What is an uncontrolled component?
Answer: An uncontrolled component uses the DOM to manage form input instead of React state.
17. What is context API?
Answer: React's Context API allows you to share data between components without passing props manually at every level.
18. 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 added functionality.
🔹 Section 3: React Hooks Interview Questions
19. What are React Hooks?
Answer: Hooks are functions that let you use state and lifecycle features in functional components.
20. Name some commonly used hooks.
i). useState
ii). useEffect
iii). useContext
iv). useRef
v). useReducer
vi). useMemo
21. What is useRef used for?
Answer: useRef provides a way to persist values across renders without triggering a re-render.
22. What is useMemo?
Answer: useMemo is used to memoize expensive calculations so they are not re-calculated on every render.
23. Difference between useEffect and useLayoutEffect?
Answer: useLayoutEffect runs synchronously after all DOM mutations. useEffect runs asynchronously after paint.
🔹 Section 4: Practical React Questions
24. How do you handle events in React?
Answer: You handle events by passing a function to an element’s event listener prop:
<button onClick={handleClick}>Click Me</button>
25. How to conditionally render components?
Answer: Using ternary operator or logical &&:
{isLoggedIn ? <Dashboard /> : <Login />}
26. How to pass data from child to parent?
Answer: By passing a callback function from the parent to the child and calling it in the child.
🔹 Section 5: React Routing Questions and Answers
27. What is React Router?
Answer: React Router is a library that enables routing in React apps, allowing navigation without reloading the page.
28. How to install React Router?
npm install react-router-dom
29. What are <Route> and <Link> components?
<Route> defines a path and component.
<Link> is used for navigation without page reload.
30. What is the difference between <Link> and <a> tag?
Answer: <Link> prevents page reload and maintains SPA behavior, while <a> reloads the page.
🔹 Section 6: Advanced & Miscellaneous
31. What is code splitting in React?
Answer: Code splitting allows you to load only the necessary parts of the app, improving performance.
32. What is lazy loading?
Answer: Lazy loading delays the loading of components until they are needed.
const LazyComp = React.lazy(() => import('./LazyComp'));
33. What is error boundary in React?
Answer: Error boundaries catch JavaScript errors in child components and display a fallback UI.
34. What is reconciliation in React?
Answer: It’s the process through which React updates the DOM by comparing the Virtual DOM with the previous one.
🔹 Section 7: Behavioral and HR Interview Questions
35. Why did you choose React JS?
Answer: React JS is flexible, efficient, and has a huge community. Its component-based approach and strong job demand make it ideal for learning and career growth.
36. Have you worked on any React projects?
Answer: (Prepare to talk about your personal or college projects, how you used React, what features you implemented, etc.)
🔹 Section 8: JSX and Rendering Questions
37. Can a React component return multiple elements?
Answer: Yes, using fragments (<></> or <React.Fragment>), a component can return multiple elements without adding extra nodes to the DOM.
38. What is the key prop in React?
Answer: The key prop is a unique identifier used when rendering lists. It helps React identify which items have changed.
39. Why is it important to use keys in lists?
Answer: Keys help in efficient updating of the list by identifying which items changed, were added, or removed.
40. What happens if you don’t use keys or use indexes as keys?
Answer: It may cause issues with component state and re-rendering when the list changes dynamically.
🔹 Section 9: Forms in React
41. How do you handle form inputs in React?
Answer: By using controlled components and setting the value of inputs from the state, updated via onChange handler.
42. What is the purpose of onChange in input elements?
Answer: onChange updates the component's state when the input value changes.
43. How can you prevent default form submission in React?
Answer: By using event.preventDefault() in the form submit handler.
const handleSubmit = (e) => {e.preventDefault();};
🔹 Section 10: Lifecycle Methods (for Class Components)
44. What are React lifecycle methods?
Answer: These are special methods in class components that get called at different stages of a component’s life (mounting, updating, unmounting).
45. Name some commonly used lifecycle methods.
i). componentDidMount()
ii). componentDidUpdate()
iii). componentWillUnmount()
46. What is componentDidMount() used for?
Answer: It is called once after the component mounts. Often used for API calls.
🔹 Section 11: Performance Optimization
47. How can you optimize performance in React?
i). Use React.memo
ii). Use useMemo and useCallback
iii). Avoid unnecessary re-renders
iv). Use lazy loading
48. What is React.memo?
Answer: React.memo is a higher-order component that prevents unnecessary re-rendering by memoizing the result.
49. Difference between useMemo and React.memo?
Answer: useMemo is used inside components to memoize values, while React.memo is used to memoize entire components.
🔹 Section 12: State Management
50. What are some ways to manage state in React?
i). Local state with useState
ii). Global state with Context API
iii). Redux, Zustand, Recoil (third-party libraries)
51. What is Redux?
Answer: Redux is a predictable state container for JavaScript apps, commonly used for managing application-wide state.
52. What are actions in Redux?
Answer: Actions are plain JavaScript objects that describe what happened in the application.
53. What is a reducer in Redux?
Answer: A function that determines how the state changes in response to actions.
🔹 Section 13: Conditional Rendering and Lists
54. How do you render a list in React?
Answer: Using .map() function:
items.map(item => <li key={item.id}>{item.name}</li>)
55. How do you render components conditionally?
Answer:
i). Using if/else
ii). Ternary operator
iii). Logical AND (&&) operator
🔹 Section 14: Error Handling
56. How do you handle errors in React?
i). Use try/catch in logic
ii). Use error boundaries for UI components
57. What are error boundaries?
Answer: React components that catch JavaScript errors anywhere in their child component tree and display fallback UI.
🔹 Section 15: React Developer Tools
58. What is React Developer Tools?
Answer: A browser extension that helps debug React apps by showing the component hierarchy, state, and props.
🔹 Section 16: Best Practices
59. Should you put all state in one component?
Answer: No, only lift state up when necessary. Otherwise, keep it close to the component that uses it.
60. Should logic be separated from UI in React?
Answer: Yes, it’s a good practice to keep logic and UI clean by separating them into custom hooks or utility functions.
🔹 Section 17: React 18 Specific
61. What is React 18?
Answer: React 18 is the latest major version with new features like concurrent rendering, automatic batching, and useTransition.
62. What is automatic batching in React 18?
Answer: React 18 batches multiple state updates into a single render automatically.
🔹 Section 18: Project-Based Questions
63. Have you used React with APIs?
Answer: Yes, APIs can be consumed using fetch, axios, or async functions within useEffect.
64. How do you display API data in React?
i). Fetch data using useEffect
ii). Store it in state using useState
iii). Render it using .map()
🔹 Section 19: Real-Time Application Questions
65. Can React be used for real-time apps?
Answer: Yes, React can be used with WebSockets, Firebase, or Socket.io for real-time communication.
🔹 Section 20: Deployment and Build
66. How to deploy a React app?
Answer:
Netlify
Vercel
GitHub Pages
Firebase Hosting
67. What is the command to build a React app?
npm run build
🔹 Section 21: Miscellaneous and Tricky Questions
68. Is React a library or a framework?
Answer: React is a library focused on building UI. It is often used with other libraries to create a full framework experience.
69. Can we use React with TypeScript?
Answer: Yes. It improves code quality and maintainability.
npx create-react-app my-app --template typescript
70. What is reconciliation?
Answer: It’s React’s process of comparing new and old Virtual DOM trees and updating only the changed parts.
71. What is hydration in React?
Answer: Hydration is the process of adding interactivity to server-rendered HTML.
🔹 Section 22: Final Stretch (29 Quickfire Questions)
We now list of 29 more rapid-fire questions with short answers.
72. What is the default port of React app?
Answer: 3000
73. Can we use inline CSS in React?
Answer: Yes
74. What is children prop?
Answer: Special prop to render child elements
75 What is ReactDOM.createRoot()?
Answer: Method to create root in React 18
76. What is the use of strict mode?
Answer: Highlights potential problems in app
77. Can React render SVG?
Answer: Yes
78. What is forwardRef?
Answer: Pass ref to child component
79. What is useCallback?
Answer: Memoizes functions to avoid re-creations
80. What is lazy loading in React?
Answer: Load components when needed
81. What is suspense in React?
Answer: Used with lazy for fallback UI
82. What is difference between useEffect and useMemo?
Answer: useEffect for side effects, useMemo for memoizing values
83. Can hooks be used in class components?
Answer: No
84. What is JSX compiled to?
Answer: React.createElement() calls
85. How to create reusable component?
Answer: Create a function/class and export it
86. What is a pure component?
Answer: Component that renders same output for same props
87. What is shallow comparison?
Answer: Checks for object reference equality
88. What is SSR?
Answer: Server-Side Rendering
89. Can React be used for mobile apps?
Answer: Yes, using React Native
90. What is the difference between React and React Native?
Answer: React for web, React Native for mobile
91. What are portals in React?
Answer: Render children into a DOM node outside parent
92. How to debug React code?
Answer: React DevTools
93. What is context vs props?
Answer: Props pass data manually, Context is global
94. What is defaultProps?
Answer: Default values for props
95. What is SSR in Next.js?
Answer: Pre-render pages on server
96. What is hydration in SSR?
Answer: Attach React events to server-rendered markup
97. What is reconciliation algorithm?
Answer: Compares Virtual DOMs
98. Can you nest components?
Answer: Yes
99. How to show loading state in React?
Answer: Use state with conditional rendering
100. What is the difference between React JS and React Native?
Answer: React JS is used for building web apps using HTML and CSS, while React Native is used for building mobile apps using native components.
✅ Conclusion
These 100 React JS Interview Questions and Answers are perfect for freshers looking to crack their first job in frontend development. Whether you're preparing for campus placements or walk-in interviews, mastering these questions will give you the confidence to stand out.
👉 Pro Tip: Practice coding small React projects, build a portfolio, and stay updated with the latest features like React 18, hooks, and best practices.
