Skip to main content

This page will be the home page when users visit https://example.com/.

React Interview Questions & Answers

Click :star:if you like the project. Pull Request are highly appreciated. Follow me @SudheerJonna for technical updates.


banner


Note: This repository is specific to ReactJS. Please check Javascript Interview questions for core javascript questions.

Table of Contents

| No. | Questions

| 1 | What is React? |

| 2 | What are the major features of React? |

| 3 | What is JSX? |

| 4 | What is the difference between Element and Component? |

| 5 | How to create components in React? |

| 6 | When to use a Class Component over a Function Component? |

| 7 | What are Pure Components? |

| 8 | What is state in React? |

| 9 | What are props in React? |

| 10 | What is the difference between state and props? |

| 11 | Why should we not update the state directly? |

| 12 | What is the purpose of callback function as an argument of setState()? |

| 13 | What is the difference between HTML and React event handling? |

| 14 | How to bind methods or event handlers in JSX callbacks? |

| 15 | How to pass a parameter to an event handler or callback? |

| 16 | What are synthetic events in React? |

| 17 | What are inline conditional expressions? |

| 18 | What is "key" prop and what is the benefit of using it in arrays of elements? |

| 19 | What is the use of refs? |

| 20 | How to create refs? |

| 21 | What are forward refs? |

| 22 | Which is preferred option with in callback refs and findDOMNode()? |

| 23 | Why are String Refs legacy? |

| 24 | What is Virtual DOM? |

| 25 | How Virtual DOM works? |

| 26 | What is the difference between Shadow DOM and Virtual DOM? |

| 27 | What is React Fiber? |

| 28 | What is the main goal of React Fiber? |

| 29 | What are controlled components? |

| 30 | What are uncontrolled components? |

| 31 | What is the difference between createElement and cloneElement? |

| 32 | What is Lifting State Up in React? |

| 33 | What are the different phases of component lifecycle? |

| 34 | What are the lifecycle methods of React? |

| 35 | What are Higher-Order components? |

| 36 | How to create props proxy for HOC component? |

| 37 | What is context? |

| 38 | What is children prop? |

| 39 | How to write comments in React? |

| 40 | What is the purpose of using super constructor with props argument? |

| 41 | What is reconciliation? |

| 42 | How to set state with a dynamic key name? | | 43 | What would be the common mistake of function being called every time the component renders? |

| 44 | Is lazy function supports named exports? |

| 45 | Why React uses className over class attribute? |

| 46 | What are fragments? |

| 47 | Why fragments are better than container divs? |

| 48 | What are portals in React? |

| 49 | What are stateless components? |

| 50 | What are stateful components? |

| 51 | How to apply validation on props in React? |

| 52 | What are the advantages of React? |

| 53 | What are the limitations of React? |

| 54 | What are error boundaries in React v16 |

| 55 | How are error boundaries handled in React v15? |

| 56 | What are the recommended ways for static type checking? |

| 57 | What is the use of react-dom package? |

| 58 | What is the purpose of render method of react-dom? | | 59 | What is ReactDOMServer? |

| 60 | How to use InnerHtml in React? |

| 61 | How to use styles in React? |

| 62 | How events are different in React? |

| 63 | What will happen if you use setState in constructor? |

| 64 | What is the impact of indexes as keys? |

| 65 | Is it good to use setState() in componentWillMount() method? |

| 66 | What will happen if you use props in initial state? |

| 67 | How do you conditionally render components? |

| 68 | Why we need to be careful when spreading props on DOM elements?? |

| 69 | How you use decorators in React? |

| 70 | How do you memoize a component? |

| 71 | How you implement Server-Side Rendering or SSR? |

| 72 | How to enable production mode in React? |

| 73 | What is CRA and its benefits? |

| 74 | What is the lifecycle methods order in mounting? |

| 75 | What are the lifecycle methods going to be deprecated in React v16? |

| 76 | What is the purpose of getDerivedStateFromProps() lifecycle method? |

| 77 | What is the purpose of getSnapshotBeforeUpdate() lifecycle method? |

| 78 | Do Hooks replace render props and higher order components? |

| 79 | What is the recommended way for naming components? |

| 80 | What is the recommended ordering of methods in component class? |

| 81 | What is a switching component? |

| 82 | Why we need to pass a function to setState()? |

| 84 | What are React Mixins? |

| 85 | Why is isMounted() an anti-pattern and what is the proper solution? |

| 86 | What are the Pointer Events supported in React? |

| 87 | Why should component names start with capital letter? |

| 88 | Are custom DOM attributes supported in React v16? |

| 89 | What is the difference between constructor and getInitialState? |

| 90 | Can you force a component to re-render without calling setState? |

| 91 | What is the difference between super() and super(props) in React using ES6 classes? |

| 92 | How to loop inside JSX? |

| 93 | How do you access props in attribute quotes? |

| 94 | What is React PropType array with shape? |

| 95 | How to conditionally apply class attributes? |

| 96 | What is the difference between React and ReactDOM? |

| 97 | Why ReactDOM is separated from React? |

| 98 | How to use React label element? |

| 99 | How to combine multiple inline style objects? | | 100 | How to re-render the view when the browser is resized? |

| 101 | What is the difference between setState and replaceState methods? |

| 102 | How to listen to state changes? |

| 103 | What is the recommended approach of removing an array element in react state? |

| 104 | Is it possible to use React without rendering HTML? |

| 105 | How to pretty print JSON with React? |

| 106 | Why you can't update props in React? |

| 107 | How to focus an input element on page load? |

| 108 | What are the possible ways of updating objects in state? |

| 110 | How can we find the version of React at runtime in the browser? |

| 111 | What are the approaches to include polyfills in your create-react-app? |

| 112 | How to use https instead of http in create-react-app? |

| 113 | How to avoid using relative path imports in create-react-app? |

| 114 | How to add Google Analytics for react-router? |

| 115 | How to update a component every second? |

| 116 | How do you apply vendor prefixes to inline styles in React? |

| 117 | How to import and export components using react and ES6? |

| 118 | What are the exceptions on React component naming? |

| 119 | Why is a component constructor called only once? |

| 120 | How to define constants in React? |

| 121 | How to programmatically trigger click event in React? |

| 122 | Is it possible to use async/await in plain React? |

| 123 | What are the common folder structures for React? |

| 124 | What are the popular packages for animation? |

| 125 | What is the benefit of styles modules? |

| 126 | What are the popular React-specific linters? |

| 127 | How to make AJAX call and In which component lifecycle methods should I make an AJAX call? |

| 128 | What are render props? |