Top 10 React Interview Question !

All of these questions are collected from all over the developers websites.

1. What is React? State some of its key features.

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
Some of the key features of React are:

• React is used for server-side rendering.
• React has uni-directional or one-way data flow or data binding.
• React makes use of virtual DOM instead of the regular or real DOM.
• A Component Using External Plugins

2. What are the advantages of using React?

• React helps enhance the performance of a web or mobile application.
• React can be used on the server as well as on the client-side.
• It used JSX code which increases the code reliability and understandability.
• React can be integrated with other frameworks like Angular, Meteor, and more.
• Writing UI test cases for React is very easy

3. Explain Virtual DOM in React?

Virtual DOM is an abstraction of the HTML DOM. It is lightweight and is not connected to the browser-specific implementation details. React provides Virtual DOM for free as the React Elements reside in virtual DOM.

These elements make up the basic nodes of the Virtual DOM tree. Once the React Elements are defined, they can be rendered into the real DOM.

4. What is JSX?

JSX stands for JavaScript XML. It is a syntax extension of JavaScript and has all the properties of JavaScript. Any JavaScript expression can be used in JSX by containing it in curly braces.

When it is compiled, JSX elements become regular JavaScript objects. You can use JSX in any statement, loop, to assign values, input arguments, and return functions.

5. What are the lifecycle methods of React Components in detail? ***

• componentWillMount()
• componentDidMount()
• componentWillRecieveProps()
• shouldComponentUpdate()
• componentWillUpdate()

6. What is the difference between state and props? ****

The state is a data structure that starts with a default value when a component mounts. This data structure can be mutated over time as a result of user events.

Props are short for properties and are the configuration of a Component. It is the way in which components communicate with each other.

Props and State are similar but their usage is different. The majority of components are usually Stateless. However, props are used to pass information or data from the parent to the child. Props are immutable and cannot be changed; however, State is used to mutate data and are useful for user input.

7. What are Controlled and Uncontrolled Components?

Controlled Components are those which take the current value through props and notify the changes through callbacks like on Change. The parent component controls this component by handling the callback and managing its own state and passing the values through props to the controlled component. As these components are controlled, they are also called dumb components.

The Uncontrolled component is one that stores and manages its own state internally. When you need the current value of the component you query the DOM using a ref and retrieve the value.

8. What do you mean by HOC?

HOC stands for higher-order component. It is an advanced technique in React that allows us to reuse component logic. HOC is not a part of the React API, it is a pattern that emerges from React’s compositional nature.

HOC allows you to reuse code, logic, and bootstrap abstractions. Third-party React Libraries usually contain HOCs. Other than sharing utility libraries and simple compositions, HOCs are also used to share behaviour or properties between React Components.

9. How do you pass data to React components?

There are 2 main ways of passing data to React components:

• Props
• Context API

Props are data passed from a component’s immediate parent. Props are declared on the child component, can be named anything, and can accept any valid value.

function Blog() {
  const post = { title: "My Blog Post!" };
  return <BlogPost post={post} />;
}

ops are consumed within the child component. Props are always available within the child as properties on an object.

function BlogPost(props) {
  return <h1>{ props.post.title }</h1>
}

Since props are plain object properties, they can be destructured for more immediate access.

function BlogPost({ post }) {
  return <h1>{ post.title }</h1>
}

Context is data passed from a context provider to any component that consumes the context.

Context allows us to access data anywhere in our app (if the provider is passed around the entire component tree), without using props.

Context data is passed down on the value prop using the Context.Provider component. It can be consumed using the Context.Consumer component or the useContext hook.