React – Interview Questions and Answers

Question: What is React?

Answer: React is an open-source JavaScript library for building user interfaces. React can be used as a base in the development of single-page website or mobile applications.

Question: Why you should use React?

Answer: React offers great features and community support. It is easy to learn as well. You don’t require domain specific knowledge. Setup is easy and quick. It is out of the box tool which creates Helloworld app for you and you can customize however you like!

Let’s Talk About Some of Great Features:

• Virtual Document Object Model: React creates data structure in memory cache which computes the changes made and then updates the browser. So it is very speedy as it is not re-rendering DOM but the updates only.
• Single-Way data flow: In general this concept means that data has one, and only one, way to be transferred to other parts of the application. state is passed to the view, actions are triggered by the view, actions can update the state and the state change is passed to the view.
• Reusable Components

Question: What is difference between Functional component and Class component in react?

Answer: Functional components in react can be referred as simple function from vanilla javascript.

Functional components are simple to write, easy to read and test. When you are creating components like button, card or navigation, you should use functional components. You can create function, access the props and simply return the html.

Functional components are stateless and you can not use React life cycle method within functional component.

const Headline = (props) => {
  return (
    <h1> {props.title} </h1>
  );
}

Class component in react has similar syntax as vanilla JS class, except you have to extend class from React library and have to add render method.

Class components are stateful. when you are creating complex component like search, you should use class component. Also, you can use React life cycle methods within class component.

const Headline extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      flag: false;
    }
  }
  render() {  
    return (
      <h1> {this.props.title} </h1>
    );
  }
}

Question: What is useState() in React?

Answer: useState() is a hook in react. Hooks are a new addition in React 16.8. They let you use React features without writing a class. The useState hook lets you add state to function components. In React, function components are stateless where as class components are stateful. With useState hook you can add state to functional component.

import React, { useState } from 'react';

function countClicks() {
  
  const [count, setCount] = useState(0);
  
  return (
    <React.Fragment>
      <div class="main">
        <button onClick={() => setCount(count + 1)}> Click Me </button>
      </div>
    </React.Fragment>
  )
}
export default countClicks;

Question: What is useEffect() in React?

Answer: useEffect() is a hook in react. The Effect Hook lets you perform side effects in function components.  In React classes, we put side effects into componentDidMount and componentDidUpdate. We can achieve that using hook in functional compinent.

import React, { useState, useEffect } from 'react';

function countClicks() {
  
  const [count, setCount] = useState(0);
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <React.Fragment>
      <div class="main">
        <button onClick={() => setCount(count + 1)}>Click Me</button>
      </div>
    </React.Fragment>
  )
}

export default countClicks;

In this example we are using effect hook to update the title.

Question: What is Server Side Rendering?

Answer: Server-side rendering means using a server to generate HTML and send it to browser. Server Side Rendering, also called SSR, is the ability of a JavaScript application to render on the server rather than in the browser.

SSR loads Page faster, as browser doesn’t have to really work to create HTML page as it is already have given to load. It improves SEO for your site.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app"
    />
    <title>Server Side Rendering</title>
  </head>
  <body>
   <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script src="/app.js"></script>
  </body>
</html>