Top 100 React Interview Questions and Answers
Q1: What is React? basics
React is a JavaScript library for building user interfaces with reusable components and efficient rendering.
Q2: What are components? basics
Components are reusable UI building blocks that return JSX elements and manage their own state and lifecycle.
Q3: What is JSX? jsx
JSX is a syntax extension for JavaScript that looks like HTML and is transpiled to JavaScript function calls.
Q4: What is the virtual DOM? core
The virtual DOM is an in-memory representation of the real DOM that React uses to optimize updates and reduce re-renders.
Q5: What is state? state
State is data managed by a component that, when changed, triggers a re-render of that component.
Q6: What are props? props
Props are arguments passed to React components, similar to function parameters, used to pass data from parent to child.
Q7: Difference between state and props? core
State is managed within a component and can change, while props are passed from parent and are read-only.
Q8: What is useState hook? hooks
useState is a React Hook that allows you to add state to functional components without converting to class components.
Q9: What is useEffect hook? hooks
useEffect is a Hook that performs side effects in functional components, replacing lifecycle methods.
Q10: What is a controlled component? forms
A controlled component is one where form input values are bound to component state, with onChange handlers.
Q11: What is an uncontrolled component? forms
An uncontrolled component is one where form data is handled by the DOM itself, using refs to access values.
Q12: What are keys in lists? lists
Keys help React identify which items have changed and are essential for efficient list rendering.
Q13: What is conditional rendering? rendering
Conditional rendering is the technique of rendering different UI based on certain conditions using if/ternary operators.
Q14: What are event handlers? events
Event handlers are functions that respond to user interactions like clicks, typing, or form submissions.
Q15: What is prop drilling? patterns
Prop drilling is passing props through multiple levels of components, often leading to code complexity.
Q16: What is context API? context
Context API provides a way to pass data through the component tree without manually passing props at every level.
Q17: What is useContext hook? hooks
useContext allows you to access context values in functional components without Consumer wrapper.
Q18: What is a callback function? functions
A callback function is a function passed as an argument to another function, often used for event handlers.
Q19: What is useCallback hook? hooks
useCallback returns a memoized callback function that only changes if dependencies have changed.
Q20: What is useMemo hook? optimization
useMemo returns a memoized value, optimizing performance by skipping expensive computations.
Q21: What is React.memo? optimization
React.memo is a higher-order component that memoizes components to prevent unnecessary re-renders.
Q22: What is useState vs useReducer? hooks
useState is for simple state, while useReducer is better for complex state logic with multiple actions.
Q23: What is useReducer hook? hooks
useReducer is a Hook for managing complex state by dispatching actions to a reducer function.
Q24: What are custom hooks? hooks
Custom hooks are JavaScript functions that use React Hooks to extract and reuse component logic.
Q25: What is React Router? routing
React Router is a library for managing navigation and routing in single-page applications.
Q26: What is lazy loading? performance
Lazy loading is a technique to split code and load components only when needed, improving performance.
Q27: What is React.lazy? performance
React.lazy is a function for code splitting that allows you to render a dynamic import as a component.
Q28: What is Suspense? async
Suspense enables components to suspend rendering while loading data or code, showing a fallback UI.
Q29: What is Fragment? basics
Fragment (or <>) allows you to return multiple elements from a component without adding extra DOM nodes.
Q30: What is StrictMode? development
StrictMode is a development tool that highlights potential problems in your React application.
Q31: What is the difference between class and functional components? components
Class components use ES6 classes and lifecycle methods, while functional components use Hooks for state and effects.
Q32: What is componentDidMount? lifecycle
componentDidMount is a lifecycle method called after a class component mounts, used for side effects.
Q33: What is componentDidUpdate? lifecycle
componentDidUpdate is called after a component updates, used for responding to prop or state changes.
Q34: What is componentWillUnmount? lifecycle
componentWillUnmount runs before a component is removed from the DOM, used for cleanup.
Q35: What is shouldComponentUpdate? optimization
shouldComponentUpdate is a lifecycle method to optimize performance by preventing unnecessary re-renders.
Q36: What is getDerivedStateFromProps? lifecycle
getDerivedStateFromProps is a lifecycle method for updating state based on prop changes.
Q37: What is the synthetic event system? events
React wraps browser events in a cross-browser synthetic event system for consistency.
Q38: What is event preventing in React? events
You can prevent default behavior using preventDefault() on the synthetic event object.
Q39: What is event stopPropagation? events
stopPropagation prevents an event from bubbling up to parent elements.
Q40: What is event delegation? events
Event delegation attaches event listeners to parent elements to handle events from child elements.
Q41: What is two-way binding? binding
Two-way binding automatically syncs data between components and DOM, implemented using onChange handlers in React.
Q42: What are defaultProps? props
defaultProps allows you to define default prop values for a component if props are not provided.
Q43: What is PropTypes? validation
PropTypes is a library for runtime type-checking of React props and catching errors.
Q44: What is Helmet? seo
Helmet is a library for managing changes to document head like title, meta tags, and links.
Q45: What is HOC (Higher-Order Component)? patterns
A HOC is a function that takes a component and returns an enhanced component with additional props or logic.
Q46: What is render props pattern? patterns
Render props is a pattern where a component takes a function as a prop and calls it with render values.
Q47: What is compound components? patterns
Compound components are components that work together as a unit, sharing implicit state.
Q48: What is Redux? statemanagement
Redux is a state management library for predictable state updates using actions, reducers, and stores.
Q49: What is Redux middleware? redux
Middleware allows you to intercept and add custom behavior to Redux actions before they reach the reducer.
Q50: What is Redux Thunk? redux
Redux Thunk is middleware that allows action creators to return functions instead of actions.
Q51: What is an action? redux
An action is a plain object with a type property that describes what happened in the application.
Q52: What is a reducer? redux
A reducer is a pure function that takes state and action, returning a new state.
Q53: What is a store? redux
A store holds the application state and enables dispatching actions and subscribing to changes.
Q54: What is mapStateToProps? redux
mapStateToProps connects Redux state to component props in React-Redux.
Q55: What is mapDispatchToProps? redux
mapDispatchToProps connects Redux dispatch to component props for triggering actions.
Q56: What is connect? redux
connect is a higher-order component from React-Redux that subscribes components to Redux store.
Q57: What is useSelector hook? redux
useSelector is a React-Redux hook for selecting state from the Redux store.
Q58: What is useDispatch hook? redux
useDispatch is a React-Redux hook for dispatching actions to the Redux store.
Q59: What is Axios? http
Axios is a promise-based HTTP client for making requests to APIs from React applications.
Q60: What is Fetch API? http
Fetch API is a browser API for making HTTP requests, returning promises for handling responses.
Q61: What is API integration? http
API integration is connecting your React app to server endpoints for fetching or sending data.
Q62: What is CORS? http
CORS (Cross-Origin Resource Sharing) allows servers to permit cross-origin requests from web applications.
Q63: What is JSON? data
JSON is a lightweight data format used for API responses and storing structured data.
Q64: What is error handling? errors
Error handling involves catching and managing errors gracefully using try-catch or error boundaries.
Q65: What is error boundary? errors
An error boundary is a React component that catches JavaScript errors in child components.
Q66: What is debugging in React? development
Debugging is identifying and fixing errors using browser DevTools and React DevTools.
Q67: What is React DevTools? development
React DevTools is a browser extension for inspecting React component hierarchies and state.
Q68: What is performance optimization? optimization
Performance optimization involves techniques like code splitting, memoization, and lazy loading.
Q69: What is bundling? build
Bundling combines multiple files into optimized bundles for efficient loading and execution.
Q70: What is minification? build
Minification removes unnecessary characters from code to reduce file sizes.
Q71: What is tree shaking? build
Tree shaking removes unused code during build time, reducing final bundle size.
Q72: What is Webpack? tools
Webpack is a module bundler that packages JavaScript files and assets for browsers.
Q73: What is Babel? tools
Babel is a JavaScript compiler that transpiles modern JavaScript and JSX to browser-compatible code.
Q74: What is testing in React? testing
Testing involves verifying component behavior using unit tests, integration tests, and snapshot tests.
Q75: What is Jest? testing
Jest is a JavaScript testing framework with built-in mocking and coverage tools.
Q76: What is React Testing Library? testing
React Testing Library is a testing utility for testing components in a user-centric way.
Q77: What is shallow rendering? testing
Shallow rendering tests a component in isolation without rendering child components.
Q78: What is snapshot testing? testing
Snapshot testing captures component output and compares to detect unintended component changes.
Q79: What is mocking? testing
Mocking replaces real implementations with fake versions for testing purposes.
Q80: What is CSS-in-JS? styling
CSS-in-JS is writing styles as JavaScript objects, used in libraries like styled-components.
Q81: What is styled-components? styling
Styled-components is a library for writing component-scoped CSS using JavaScript template literals.
Q82: What is Tailwind CSS? styling
Tailwind CSS is a utility-first CSS framework for rapidly building custom designs.
Q83: What is Material-UI? ui
Material-UI is a React component library implementing Material Design principles.
Q84: What is Bootstrap integration? ui
Bootstrap integration adds Bootstrap CSS framework to React apps for pre-built components.
Q85: What is server-side rendering? ssr
Server-side rendering renders React components on the server, sending HTML to the browser.
Q86: What is Next.js? frameworks
Next.js is a React framework providing server-side rendering, static generation, and API routes.
Q87: What is static generation? ssr
Static generation pre-builds pages at build time, improving performance and SEO.
Q88: What is incremental static regeneration? ssr
ISR allows regenerating static pages on-demand without rebuilding the entire site.
Q89: What is Gatsby? frameworks
Gatsby is a React framework for building fast, secure static sites and applications.
Q90: What is React Native? mobile
React Native is a framework for building native mobile apps using React and JavaScript.
Q91: What is Expo? mobile
Expo is a platform for building and deploying React Native apps without native code.
Q92: What is authentication? security
Authentication verifies user identity through credentials like username/password or tokens.
Q93: What is authorization? security
Authorization controls what authenticated users can access based on permissions.
Q94: What is JWT? security
JWT (JSON Web Token) is a tokensecurely transmitting information between client and server.