ReactJS interview questions

What are the core concepts of ReactJS?

• React recommends composition over inheritance
• It uses VirtualDOM instead of RealDOM. The manipulations of real DOM is expensive
• React supports both client-side and server-side rendering
• It has a Unidirectional data flow

What are the benefits of using VirtualDOM?

• VirtualDOM has efficient diffing algorithm.
• Boost Performance.
• VirtualDOM can be used without React.
• Lightweight.
• The manipulations of VirtualDOM is less expensive than realDOM
• Allows building applications without thinking about state transitions.

What are the differences between Real DOM and Virtual DOM?

What is reconciliation algorithm in React?

React decides whether an actual DOM update is necessary based on the changes of the component’s props or state. React makes this decision by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. This process is called reconciliation.

What is JSX in ReactJS?

JSX in ReactJS is syntactic sugar which is not plain HTML. JSX (also called JavaScript XML) is a XML-like syntax extension to ECMAScript. It just provides syntactic sugar for the React.createElement() function.

Following is an example of JSX syntax inside ReactJS:

const App = () => {
    const contextValue = useContext(AppContext);
    const campaignObj = contextValue.selectedCampaign;
    const productsObj = campaignObj.products;

    return(
        <Fragment>
            {productsObj.map(item => <a key={item.id} name={item.name} className="dropdown-link w-dropdown-link">{item.headline}</a>)}
        </Fragment>
    )
export default App;

Why statements (if-else/switch/for) do not work inside JSX?

JSX in ReactJS is fundamentally syntactic sugar. After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.

We can embed any JavaScript expression in JSX by wrapping it in curly braces but not any statements such as if-else/switch/for.

When we should use functional component?

After React version 16.8, the hooks were introduced with React. Most of the life-cycle methods can be used using hooks. In all the cases, we should start using functional component. React also recommends to use functional components. In the future, React will obsolete class based components.

When we should use class based component?

Prior to React version 16.8, only the class based component were available. It had limitations specially the component reusablity. React recommends to use functional components. We should avoid using class based components.

What are the differences between state and props?

The main difference between state and props is that data stored in props are fixed throughout the component lifetime. On the other hand, the data stored in React state can be changed as required. The props and state are plain JavaScript objects.

The state change can be due to user actions, network requests, etc. The props are set by the parent component, the state is changed internally by the component itself.

What is lift state up in React?

When several components need to share the same data, it is recommended to lift the shared state up to their closest common ancestor.

That means if two child components share the same data from its parent, then move the state to parent instead of maintaining local state in both of the child components.

What is children prop in React?

In React, children is a prop (props.children) that allows us to pass components as data to other components.

Example of children prop

const FunctionalComponent = ({ children }) => {
  return (
    <div>
      <div>I am inside functional component.</div>
      { children }
    </div>
  );
};

How we can avoid prop drilling in React?

We can avoid prop drilling in React is context API. The context API provides a way to pass data through the component tree without having to pass props down manually at every level.

const {Provider, Consumer} = React.createContext(defaultValue)

What are the benefits of using “key” prop in iterator?

As we all know that react creates a virtual DOM and it only renders the part of the DOM that has been changed. To do that react needs unique key for all possible blocks. So, if we can assign a unique ID to an iterator block, then it is easier for React to identify the changes.

What are different types of export in ReactJS?

In most cases, we use two types of export in reactjs. They are default export and named export. Following are the examples of default and named exprots:

Example of export default

// We don't need to specify any name for default export. It is possible to have one default export per file.
export default function(x) {
  return x * x * x;
}

Example of named export

# It is possible to have multiple named exports per file.
export function cube(x) {
  return x * x * x;
}

When to use React setState callback

setState works asynchronously. That means after calling setState the state variable is not immediately changed. If we want to perform an action immediately after setting state on a state variable, the callback will be useful and right way to do it.

What are the differences between createElement and cloneElement?

The React.createElement() method is used to create elements. JSX code inside ReactJS converts to React.createElement() by a transpilar. We should use JSX instead of using React.createElement method as it is very hard to maintain or debug.

The React.cloneElement() method is used when a parent component wants to add or modify the props of its children.

Why we will have to use setState method to set the state?

Please explain the concepts of stateup in reactJS

Why inheritance is not encouraged in ReactJS?

When the program starts why it goes to index.js?

Which libraries are used to convert the JSX to regular JavaScript?

Babel or TypeScript are the most used transpilar to transform JSX code into regular JavaScript.

What is a transpiler? Is there any default transpiler used in ReactJS?

Transpilers are known as source-to-source compilers. They are a subset of compilers which take in a source code file and convert it to another source code file in some other language or a different version of the same language.

If we are using create-react-app to setup the reactjs project, babel is used under the hood. Babel is the default transpiler in this case. We don’t need to worry about installing Babel as everything is taken care of under the hood.

What react recommends to use for the node that exists outside the DOM hierarchy?

Recat recommends to use portal for a DOM node that exists outside the DOM hierarchy. Following is the code example:

ReactDOM.createPortal(child, container)

Is it possible to change the state of a component from another component?

Is it possible to change the props of a component inside that component?

Is the state object of a component private?

State in React is used to store data. The main difference between state and props is that data stored in props are fixed throughout the component lifetime but data store in React state can be changed as required.

The state change can be due to user actions, network requests, etc. The props are set by the parent component, the state is changed internally by the component itself.

The state data of a component is private. The state data is not exposed to the component that makes use of it. This data is private and fully controlled by the component. As the state change triggers component re-render, the state object is private within the component.

Why the setState works asynchronously?

setState actions are asynchronous and are batched for performance gains. setState alters the state and causes rerendering. This can be an expensive operation and making it synchronous might leave the browser unresponsive.

Why JSX uses className over class attribute?

As we know class is a keyword in JavaScript. The JSX in React, is an extension of JavaScript. The JSX ultimately converts to regular JavaScript. As class is a keyword, it is not possible to use class as attribute. Instead it uses className like below:

render() {
  return <div className={'col-xs-12'}>Home</div>
}

How to group elements without adding DOM nodes?

React.Fragments let us group a list of children without adding extra DOM node.

render() {
  return (
    <React.Fragment>
      <Menu />
      <Sidebar />
    </React.Fragment>
  )
}

What are the benefits of React.Fragment?

• Fragments are a bit faster
• Fragments use less memory by not creating an extra DOM node.
• Flexbox and CSS Grid have a special parent-child relationships, adding divs might break the layout.
• The DOM Inspector is less cluttered.

What are the benefits of using TypeScript with reactjs?

How to enforce type checking on props of a component?

We can JavaScript extensions like Flow or TypeScript to typecheck the whole application. If we don’t use those extensions we can assign the special propTypes property to the component. Following is an example:

    import React from 'react'
    import PropTypes from 'prop-types'

    const User = ({username, height}) => {
        return (
            <>
                <h1>{`Welcome, ${username}`}</h1>
                <h2>{`Height, ${height}`}</h2>
            </>
        )
    };

    User.propTypes = {
        username: PropTypes.string.isRequired,
        height: PropTypes.number.isRequired
    }

Which object is used for server side rendering?

ReactDOMServer object is used for server side rendering. The ReactDOMServer object enables us to render components to static markup.

The following methods can be used in both the server and browser environments:

• renderToString()
• renderToStaticMarkup()

The following methods depend on a package (stream) that is only available on the server.

• renderToNodeStream()
• renderToStaticNodeStream()

What are the limitations of React?

• React is not a full framework rather it is just a view library.
• Without proper knowledge of JavaScript, it is difficult to learn React
• It has a thick learning curve for beginners
• Integrating React into a traditional MVC framework requires some additional configuration.
• The code complexity increases with inline templating and JSX.
• Too many smaller components are sometimes difficult to manage.

What are the benefits of using TypeScript with reactjs?

When to use CSS In JS technique in React?