React interview questions

Today we are gonna discussed most commonly asked react interview questions

Q1. What is React?

React (also known as React.js or ReactJS) is a JavaScript library for building user interfaces. It uses a declarative paradigm that makes it easier to reason about your application and aims to be both efficient and flexible. Initially developed internally at Facebook, React has since been made open source where it continues to be developed and maintained by Facebook and the open source community.

Q2. What is Component?

Components are the building blocks of any React app and a typical React app will have many of these. Simply put, a component is a JavaScript class or function that optionally accepts inputs i.e. properties(props) and returns a React element that describes how a section of the UI (User Interface) should appear.

Click here to learn more about react component

Q3. What is JSX?

JSX is a syntax extension to JavaScript and comes with the full power of JavaScript. JSX produces React “elements”. You can embed any JavaScript expression in JSX by wrapping it in curly braces. After compilation, JSX expressions become regular JavaScript objects. This means that you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions. Even Though React does not require JSX, it is the recommended way of describing our UI in React app.

Example

class App extends React.Component {
  render() {
    return(
      <div>
        <h1>{'Hello world!'}</h1>
      </div>
    )
  }
}

Q4. What is ReactDOM?

ReactDOM is a package that provides DOM specific methods. As the name implies, ReactDOM is the glue between React and the DOM. Often, we will only use it for one single thing: mounting with ReactDOM. Another useful feature of ReactDOM is ReactDOM.findDOMNode() which we can use to gain direct access to a DOM element. ReactDOM provides DOM specific methods only.

Q5. What is the difference between ReactDOM andReact?

React and ReactDOM were only recently split into two different libraries. Prior to v0.14, all ReactDOM functionality was part of React. This may be a source of confusion, since any slightly dated documentation won’t mention the React / ReactDOM distinction.

ReactDOM is a package that provides DOM specific methods. As the name implies, ReactDOM is the glue between React and the DOM. Often, you will only use it for one single thing: mounting with ReactDOM.render(). Another useful feature of ReactDOM is ReactDOM.findDOMNode() which you can use to gain direct access to a DOM element. (Something you should use sparingly in React apps, but it can be necessary.) If your app is “isomorphic”, you would also use ReactDOM.renderToString() in your back-end code.

For everything else, there’s React. You use React to define and create your elements, for lifecycle hooks, etc. i.e. the guts of a React application.

The reason React and ReactDOM were split into two libraries was due to the arrival of React Native. React contains functionality utilised in web and mobile apps. ReactDOM functionality is utilised only in web apps.

Q6. What is the stateless component?

stateless component is just a plain JavaScript function which takes props as an argument and returns a react element. The functional component is also known as function components

A stateless component has no state, it means that you can’t reach `this.state` inside it. It also has no lifecycle so you can’t use componentDidMount and other hooks.

Example

function Greeting(props) {
  return <h1>Hello {props.name}!</h1>;
}

Q7. What is the State?

The heart of every React component is its “state”, an object that determines how that component renders & behaves. In other words, State is a JavaScript object that stores a component’s dynamic data and determines the component’s behaviour. Because state is dynamic, it enables a component to keep track of changing information in between renders and for it to be dynamic and interactive.

State can only be used within a class component. If you anticipate that a component will need to manage state, it should be created as a class component and not a functional one.

Q8. What is the Virtual DOM?

The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.

Like the actual DOM, the Virtual DOM is a node tree that lists elements and their attributes and content as objects and properties. React’s render() method creates a node tree from React components and updates this tree in response to mutations in the data model, caused by actions.

Each time the underlying data changes in a React app, a new Virtual DOM representation of the user interface is created

This is where things get interesting. Updating the browser’s DOM is a three-step process in React.

  • Whenever anything may have changed, the entire UI will be re-rendered in a Virtual DOM representation.
  • The difference between the previous Virtual DOM representation and the new one will be calculated.
  • The real DOM will be updated with what has actually changed. This is very much like applying a patch.

Q9. What is the use of refs?

Refs make it possible to access DOM nodes directly within React. This comes in handy in situations where, just as one example, you want to change the child of a component. Let’s say you want to change the value of an <input> element, but without using props or re-rendering the whole component.

Q10. What is the Redux?

Redux is an open-source JavaScript library for managing application state. It is most commonly used with libraries such as React or Angular for building user interfaces. Similar to (and inspired by) Facebook’s Flux architecture, it was created by Dan Abramov and Andrew Clark

Redux makes it easy to manage the state of your application. Another way of looking at this – it helps you manage the data you display and how you respond to user actions.

The basic idea of Redux is that the entire application state is kept in a single store. The store is simply a javascript object. The only way to change the state is by firing actions from your application and then writing reducers for these actions that modify the state. The entire state transition is kept inside reducers and should not have any side-effects.

Q11. What are the controlled component ?

In HTML, form elements such as <input><textarea>, and <select>typically maintain their own state and update it based on user input. When a user submits a form the values from the aforementioned elements are sent with the form. With React it works differently. The component containing the form will keep track of the value of the input in it’s state and will re-render the component each time the callback function e.g. onChange is fired as the state will be updated. A form element whose value is controlled by React in this way is called a “controlled component”.

With a controlled component, every state mutation will have an associated handler function. This makes it straightforward to modify or validate user input.

Q12. What is the HOC?

A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API. They are a pattern that emerges from React’s compositional nature.

A higher-order component is a function that takes a component and returns a new component.

HOC’s allow you to reuse code, logic and bootstrap abstraction. HOCs are common in third-party React libraries. The most common is probably Redux’s connect function. Beyond simply sharing utility libraries and simple composition, HOCs are the best way to share behavior between React Components. If you find yourself writing a lot of code in different places that does the same thing, you may be able to refactor that code into a reusable HOC.

Q13. What is the Component Lifecycle?

React component lifecycle is a serial of methods that are automatically called by react at certain points during. This method are an optional methods. We can optionally define inside our class-based components.

Basically all the React components lifecycle methods has split in four phases: initialization, mounting, updating and unmounting.

The following are the lifecycle methods:

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

Click here to learn more about lifecycle

If you have found this article useful, share this article with your friends and leave comment if you have any question. Your responses are also highly appreciated.

One Comment

  1. Odeyale Kehinde Musiliudeen said:

    This is a great job!

    August 21, 2019
    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *