React Js Interview Questions

1.    What is JSX ?

              JSX is a syntax extension of JavaScript. By using JSX, we can write HTML structures in the same file that contains JavaScript code.

2.Can web browsers read JSX directly? 

·         Web browsers cannot read JSX directly. This is because they are built to only read regular JS objects and JSX is not a regular JavaScript object 

·         For a web browser to read a JSX file, the file needs to be transformed into a regular JavaScript object. For this, we use Babel

3.What is the virtual DOM?

React keeps a lightweight representation of the real DOM in the memory, and that is known as the virtual DOM. When the state of an object changes, the virtual DOM changes only that object in the real DOM, rather than updating all the objects.

4. How to create React Project ?

npx create-react-app <foldername>

5. What is an event in React?

An event is an action that a user or system may trigger, such as pressing a key, a mouse click, etc.

·         React events are named using camelCase, rather than lowercase in HTML.

·         With JSX, you pass a function as the event handler, rather than a string in HTML.

<Button onPress={lightItUp} />

6. synthetic events in React?

   import React from 'react';

class ButtonComponent extends React.Component {

  handleClick = (event) => {

    console.log("Button clicked!");

    console.log("Event type:", event.type);

  };

   render() {

    return <button onClick={this.handleClick}>Click me</button>;

  }

}

export default ButtonComponent;

In this example, the onClick event handler is using a synthetic event provided by React. When the button is clicked, the handleClick function is called with the synthetic event object as an argument. You can access standard properties of the event like event.type, event.target, etc., just like you would with native browser events.

7.  What are lists in React?

function Car(props) {

  return <li>I am a { props.brand }</li>;

}

function Garage() {

  const cars = [

    {id: 1, brand: 'Ford'},

    {id: 2, brand: 'BMW'},

    {id: 3, brand: 'Audi'}

  ];

  return (

    <>

      <h1>Who lives in my garage?</h1>

      <ul>

        {cars.map((car) => <Car key={car.id} brand={car.brand} />)}

      </ul>

    </>

  );

}

8. How is React different from Angular?

  

9. What are the components in React?

A component is essentially a piece of the user interface. It splits the user interface into independent, reusable parts that can be processed separately. It is two types.

1. functional/stateless component

2. class component/state full component.

10. What is the use of render() in React?

            It is required for each component to have a render() function. This function returns the HTML, which is to be displayed in the component.

11. What is a state in React?

            The state is a built-in React that is used to contain data or information about the component. The state in a component can change over time, and whenever it changes, the component re-renders.

         The change in state can happen as a response to user action or system-generated events. It determines the behavior of the component and how it will render.

12. What are props in React?

The props in React are the inputs to a component of React. They can be single-valued or objects having a set of values that will be passed to components of React during creation by using a naming convention that almost looks similar to HTML-tag attributes. We can say that props are the data passed from a parent component into a child component.

13. What is React Hooks?

React Hooks are the built-in functions that permit developers for using the state and lifecycle methods within React components 

14. What are the rules that must be followed while using React Hooks?

        There are 2 rules which must be followed while you code with Hooks:

·                    React Hooks must be called only at the top level. It is not allowed to call them inside the nested           functions, loops, or conditions.

·                   It is allowed to call the Hooks only from the React Function Components

15. What is the use of useEffect React Hooks?

The useEffect React Hook is used for performing the side effects in functional components. With the help of useEffect, you will inform React that your component requires something to be done after rendering the component or after a state change

The useEffect React Hook will accept 2 arguments:

 useEffect(callback,[dependencies]);

Example:

  import { useEffect } from 'react';

function WelcomeGreetings({ name }) {

    const msg = `Hi, ${name}!`;     // Calculates output

    useEffect(() => {

    document.title = `Welcome to you ${name}`;    // Side-effect!

    }, [name]);

    return <div>{msg}</div>;         // Calculates output

}

16. What are Custom Hooks?

A Custom Hook is a function in Javascript whose name begins with ‘use’ and which calls other hooks. 

The disadvantage of Custom Hooks is it cannot be used inside of the classes.

17. Explain Strict Mode in React.

    StrictMode is a tool added in version 16.3 of React to highlight potential problems in an application. It performs additional checks on the application.

function App() {

    return (  

      <React.StrictMode>

   

        <div classname="App">

   

          <Header/>

   

          <div> Page Content </div>

   

          <Footer/>

   

        </div>

   

      </React.StrictMode>  

    );

}

To enable StrictMode, <React.StrictMode> tags need to be added inside the application:

 

18. Explain about types of Hooks in React.

There are two types of Hooks in React. They are:

1. Built-in Hooks: The built-in Hooks are divided into 2 parts as given below:

·         Basic Hooks:

     useState(): This functional component is used to set and retrieve the state.

     useEffect(): It enables for performing the side effects in the functional components.

     useContext(): It is used for creating common data that is to be accessed by the components hierarchy without having to pass the props down to each level.

·         Additional Hooks:

     useReducer(): It is used when there is a complex state logic that is having several sub-values or when the upcoming state is dependent on the previous state. It will also enable you to optimization of component performance that will trigger deeper updates as it is permitted to pass the dispatch down instead of callbacks.

     useMemo(): This will be used for recomputing the memoized value when there is a change in one of the dependencies. This optimization will help for avoiding expensive calculations on each render.

     useCallback(): This is useful while passing callbacks into the optimized child components and depends on the equality of reference for the prevention of unneeded renders.

    useImperativeHandle():  It will enable modifying the instance that will be passed with the ref object.

   useDebugValue(): It is used for displaying a label for custom hooks in React DevTools.

   useRef(): It will permit creating a reference to the DOM element directly within the functional component.

useLayoutEffect(): It is used for the reading layout from the DOM and re-rendering synchronously.

2.    Custom Hooks: A custom Hook is basically a function of JavaScript. The Custom Hook working is similar to a regular function. The “use” at the beginning of the Custom Hook Name is required for React to understand that this is a custom Hook and also it will describe that this specific function follows the rules of Hooks. Moreover, developing custom Hooks will enable you for extracting component logic from within reusable functions.

 
19. Differentiate React Hooks vs Classes.

    

20.