Common React Interview Questions

Here are the most common React interview questions that will be asked on your next interview. Good luck if you are about to interview and I hope this material will help you.

What is React?

React is an open-source JavaScript frontend library for creating user interfaces. It uses component based approach to create complicated, interactive web and mobile user interfaces.

Developing single-page application with React is effortless especially using the integrated toolchain called Create React App.

What are the advantages of React?

First is the increased performance with Virtual DOM. React is insanely blazing fast.

Second, React uses JSX that makes code painless to read and write.

Third, React works on both the client and server side.

Fourth, it is simple to integrate this library with other frameworks since it is only a view library.

Last, it is easy to write unit tests.

What is JSX?

JSX is a syntax extension to JavaScript that describes what the UI should look with the full power of JavaScript. JSX provides syntactic sugar for the React.createElement() function.

JSX gets compiled toReact.createElement()calls which return plain JavaScript objects. It gives us expressiveness of JavaScript along with HTML like template syntax.

What is the difference between Element and Component?

React elements are the building blocks of React applications.
It describes what you want to see on the screen. React elements are immutable.

React components are small, reusable pieces of code that return a React element to be rendered to the page. The simplest version of React component is a plain JavaScript function that returns a React element. Components can also be ES6 classes.

You can say that a component is a factory for creating multiple elements.

What are react fragments?

Fragments let you group a list of children without adding extra nodes to the DOM because fragments are not rendered to the DOM.

This is also very useful for CSS Flexbox and Grid as they have special parent to child relationship as adding an extra tag in the between will break the layout.

What is prop in React?

Props or properties are arguments passed into React components. It contains data coming down from a parent component to a child component.

What is "key" prop?

Keys help react identify which elements were added, changed or updated, and removed. It should be given to array elements to provide a unique identity for each element.

React would be able to reorder elements without needing to re-evaluate as much.

What is state in React?

State holds some information that may change over the lifetime of the component. It is private and fully controlled by the component until the owner component decides to pass it.

Why should we not update the state directly?

Updating the state directly, like below will not cause the component to re-render.

Instead, use setState() method. This method will schedule an update to a component's state object. When state changes, the component responds by re-rendering.

What are lifecycle methods?

Lifecycle methods are custom functionality that gets executed during the different phases of a component.

These are methods are available when the component gets created or inserted into the DOM, when the component updates, and when the component gets unmounted or removed from the DOM.

What are Controlled and Uncontrolled Component.

AControlled Componentis one that takes a value throughpropsand notify changes through callbacks likeonChange or onClick.

Form data is handled by React component.

Uncontrolled Componentis one that stores its own state internally, and queries the DOM using aref or referenceto find the current value when it is needed.

Form data is handled by the DOM.

In most cases,Controlled componentsare recommended to be used when implement forms.

What is the use of refs?

The ref is used to return a reference to the element. They can be useful when you need direct access to the DOM element or an instance of a component.

Why should component names start with capital letters?

Thetypeof a component is determined by the way the tags are named. Both capitalized and dot notations are treated as React component while lowercase are treated as DOM elements.

What is Virtual DOM?

Virtual DOM or VDOM is lightweight JavaScript representation of the DOM. The representation of User Interface is kept in memory and synced with the "real" DOM. Update on virtual DOM is cheaper and faster than updating the actual DOM.

When React finds the differences between the previous virtual DOM and the current virtual DOM, it only makes the necessary changes to the actual DOM.

Feel free to bookmark even if you don't need this for now. You may need to refresh/review down the road when it is time for you to look for a new role.

If you want to support me - Buy Me A Coffee