Why React? Basic React Interview Questions You Should Be Prepared To Answer
React, developed by Facebook, is a front end Javascript library for building user interfaces. Many large companies currently use React in production such as Netflix, Instagram, Airbnb, and Reddit just to name a few.
React’s popularity has grown since its official release in 2013 and it is currently one of the most popular frameworks.
In terms of demand for React in the job market, React remains one of the most sought after front end Javascript frameworks.
Below are some questions most likely to be asked by your interviewer:
1.What is the Virtual DOM?
A JavasScript object that is a copy of the real DOM. React’s render function creates a node tree out of the React components. The virtual DOM updates in response to any changes by the user which means that the entire UI is re-rendered. Then the real DOM is updated based on the changes to the virtual DOM.
2. What is the difference between the Real DOM and Virtual DOM?
Real DOM
-Updates slowly
-Can directly update HTML
-Creates a new DOM element if element updates
-Performance issues (can take up a lot of memory)
Virtual DOM
-Fast updates
-Can’t directly update HTML
-Updates the JSX if element updates
-No memory wastage
3. What is JSX?
Javascript XML. It is syntax extension of Javascript that allows you to write HTML-like code in Javascript files. JSX produces React “elements”.
4. What does it mean “In React, everything is a component”?
Components are building blocks of a React application’s UI. An UI has many components, each independent of each other.
5. What are Props?
Props are Properties. They are read only components which must be kept immutable. Props are passed down from parent to child (never the other way around).
6. How and why are arrow functions used?
Arrow functions bind the context of the component. Arrow functions don’t redefine the value of this within their function body.
7. What are the phases of React component’s lifecycle?
i. Initial Rendering Phase: Component gets mounted to the DOM
ii. Updating Phase: Component is able to be updated and re-rendered when a prop or state change occurs.
iii. Unmounting Phase: Component is destroyed and removed from the DOM
8. What are HOC (Higher Order Components)?
A function that takes a component and returns a new component. HOC composes the original component by wrapping another component within it. The wrapped component will receive all props of the container. It does not modify the wrapped component. It is used to define logic in one place and share it across many components with the same implementation. Check out React docs for an example.
9. What is the difference between controlled and uncontrolled components?
Uncontrolled component treats the DOM as the source of truth for form inputs. Controlled components uses internal state to keep track of inputs.
10. What is the difference between class and functional components?
Class based components extends React’s Component’s class and implements a render() method.
Functional components are stateless and uses return. Functional components are preferred for rendering UI that only depends on props (due to simplicity and faster performance).
There you go! I hope the range of questions helped solidify the inner workings of React. I strongly recommend you read the React docs for a more comprehensive explanation of the concepts mentioned as well as concepts that haven’t been discussed. Preparing for your interview does not stop here. Best of luck!
Sources:
