Top 26+ React Interview Questions (2018 Edition)

What are the limitations of ReactJS?

Below are the list of limitations: React is just a view library, not a full-blown framework There is a learning curve for beginners who are new to web development. Integrating React.js into a traditional MVC framework requires some additional configuration The code complexity increases with inline templating and JSX. Too many smaller components leading to over-engineering or boilerplate

What is the difference between state and props?

Both props and state are plain JavaScript objects. While both of them hold information that influences the output of render, they are different in their functionality with respect to component. i.e, Props get passed to the component similar to function parameters state is managed within the component similar to variables declared within a function.

What are error boundaries in ReactJS (16)?

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. A class component becomes an error boundary if it defines a new lifecycle method called componentDidCatch(error, info) class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } componentDidCatch(error, info) { // Display fallback UI this.setState({ hasError: true }); // You can also log the error to an error reporting service logErrorToMyService(error, info); } render() { if (this.state.hasError) { // You can render any custom fallback UI return <h1>Something went wrong.</h1>; } return this.props.children; } } After that use it as a regular component <ErrorBoundary> <MyWidget /> </ErrorBoundary>

How is React different from AngularJS (1.x)?

For example, AngularJS (1.x) approaches building an application by extending HTML markup and injecting various constructs (e.g. Directives, Controllers, Services) at runtime. As a result, AngularJS is very opinionated about the greater architecture of your application — these abstractions are certainly useful in some cases, but they come at the cost of flexibility. By contrast, React focuses exclusively on the creation of components, and has few (if any) opinions about an application's architecture. This allows a developer an incredible amount of flexibility in choosing the architecture they deem "best" — though it also places the responsibility of choosing (or building) those parts on the developer.

What is the difference between a Presentational component and a Container component?

Presentational components are concerned with how things look. They generally receive data and callbacks exclusively via props. These components rarely have their own state, but when they do it generally concerns UI state, as opposed to data state. Container components are more concerned with how things work. These components provide the data and behavior to presentational or other container components. They call Flux actions and provide these as callbacks to the presentational components. They are also often stateful as they serve as data sources.

What is a pure function?

A Pure function is a function that doesn't depend on and doesn't modify the states of variables out of its scope. Essentially, this means that a pure function will always return the same result given same parameters.

What are the advantages of ReactJS?

Below are the advantages of ReactJS: Increases the application's performance with Virtual DOM JSX makes code is easy to read and write It renders both on client and server side Easy to integrate with other frameworks (Angular, BackboneJS) since it is only a view library Easy to write UI Test cases and integration with tools such as JEST.

What is Flux?

Flux is an application design paradigm used as a replacement for the more traditional mvc pattern. It is not a framework or a library but a new kind of architecture that complements React and the concept of Unidirectional Data Flow. Facebook used this pattern internally when working with React The workflow between dispatcher, stores and views components with distinct inputs and outputs as follows: https://github.com/sudheerj/reactjs-interview-questions/raw/master/images/flux.png

Why would you use forceUpdate in a React component?

In order to force a re-render if there is some condition React is not detecting that requires an update to the UI. Typically this should not be necessary to call.

What is Redux?

Redux is a predictable state container for JavaScript apps based on the Flux design pattern. Redux can be used together with ReactJS, or with any other view library. It is tiny (about 2kB) and has no dependencies.

What are the major features of ReactJS?

The major features of ReactJS are as follows, It uses VirtualDOM instead RealDOM considering that RealDOM manipulations are expensive. Supports server-side rendering Follows Unidirectional data flow or data binding Uses reusable/composable UI components to develop the view

What is virtual DOM?

The virtual DOM (VDOM) is an in-memory representation of Real DOM. The representation of a UI is kept in memory and synced with the "real" DOM. It's a step that happens between the render function being called and the displaying of elements on the screen. This entire process is called reconciliation.

How to access redux store outside a react component?

Yes.You just need to export the store from the module where it created with createStore. Also, it shouldn't pollute the global window object

Why ReactJS uses className over class attribute?

class is a keyword in javascript and JSX is an extension of javascript. That's the principal reason why React uses className instead of class. render() { return <span className="menu navigation-menu">Menu</span> }

What is the difference between a controlled component and an uncontrolled component?

A controlled component is a component where React is in control and is the single source of truth for the form data. An uncontrolled component is where your form data is handled by the DOM, instead of inside your React component. Though uncontrolled components are typically easier to implement since you just grab the value from the DOM using refs, it's typically recommended that you favor controlled components over uncontrolled components. The main reasons for this are that controlled components support instant field validation, allow you to conditionally disable/enable buttons, enforce input formats, and are more "the React way".

Why should not we update the state directly?

If you try to update state directly then it won't re-render the component. //Wrong This.state.message ="Hello world"; Instead use setState() method. It schedules an update to a component's state object. When state changes, the component responds by re-rendering //Correct This.setState({message: 'Hello World'}); Note: The only place you can assign the state is constructor.

Describe how events are handled in React.

In order to solve cross browser compatibility issues, your event handlers in React will be passed instances of SyntheticEvent, which is React's cross-browser wrapper around the browser's native event. These synthetic events have the same interface as native events you're used to, except they work identically across all browsers. What's mildly interesting is that React doesn't actually attach events to the child nodes themselves. React will listen to all events at the top level using a single event listener. This is good for performance and it also means that React doesn't need to worry about keeping track of event listeners when updating the DOM.

What are the downsides of Redux over Flux?

Instead of saying downsides we can say that there are few compromises of using Redux over Flux. Those are as follows: You will need to learn avoiding mutations: Flux is un-opinionated about mutating data, but Redux doesn't like mutations and many packages complementary to Redux assume you never mutate the state. You can enforce this with dev-only packages like redux-immutable-state-invariant, Immutable.js, or your team to write non-mutative code. You're going to have to carefully pick your packages: While Flux explicitly doesn't try to solve problems such as undo/redo, persistence, or forms, Redux has extension points such as middleware and store enhancers, and it has spawned a young but rich ecosystem. This means most packages are new ideas and haven't received the critical mass of usage yet There is no nice Flow integration yet: Flux currently lets you do very impressive static type checks which Redux doesn't support yet.

What is wrong with this code?

Questions: What is wrong with this code? this.setState((prevState, props) => { return { streak: prevState.streak + props.count } }) Answer: Nothing is wrong with it. It's rarely used and not well known, but you can also pass a function to setState that receives the previous state and props and returns a new state, just as we're doing above. And not only is nothing wrong with it, but it's also actively recommended if you're setting state based on previous state.

What is React?

React is an open-source JavaScript library created by Facebook for building complex, interactive UIs in web and mobile applications. React's core purpose is to build UI components; it is often referred to as just the "V" (View) in an "MVC" architecture.

What's the difference between an "Element" and a "Component" in React?

Simply put, a React element describes what you want to see on the screen. Not so simply put, a React element is an object representation of some UI. A React component is a function or a class which optionally accepts input and returns a React element (typically via JSX which gets transpiled to a createElement invocation).

What is state in ReactJS?

State of a component is an object that holds some information that may change over the lifetime of the component. We should always try to make our state as simple as possible and minimize the number of stateful components. Let's create user component with message state, class User extends React.Component { constructor(props) { super(props); this.state = { message: "Welcome to React world", } } render() { return ( <div> <h1>{this.state.message}</h1> </div> ); } }

What are the different phases of ReactJS component lifecycle?

There are four different phases of React component's lifecycle: Initialization: In this phase react component prepares setting up the initial state and default props. Mounting: The react component is ready to mount in the browser DOM. This phase covers componentWillMount and componentDidMount lifecycle methods. Updating: In this phase, the component get updated in two ways, sending the new props and updating the state. This phase covers shouldComponentUpdate, componentWillUpdate and componentDidUpdate lifecycle methods. Unmounting: In this last phase, the component is not needed and get unmounted from the browser DOM. This phase include componentWillUnmount lifecycle method. https://raw.githubusercontent.com/sudheerj/reactjs-interview-questions/master/images/phases.png

Describe Flux vs MVC?

Traditional MVC patterns have worked well for separating the concerns of data (Model), UI (View) and logic (Controller) — but MVC architectures frequently encounter two main problems: Poorly defined data flow: The cascading updates which occur across views often lead to a tangled web of events which is difficult to debug. Lack of data integrity: Model data can be mutated from anywhere, yielding unpredictable results across the UI. With the Flux pattern complex UIs no longer suffer from cascading updates; any given React component will be able to reconstruct its state based on the data provided by the store. The Flux pattern also enforces data integrity by restricting direct access to the shared data.

Explain some difference between Flux and AngularJS (1.x) approach

UI components in AngularJS typically rely on some internal $scope to store their data. This data can be directly mutated from within the UI component or anything given access to $scope — a risky situation for any part of the component or greater application which relies on that data. By contrast, the Flux pattern encourages the use of immutable data. Because the store is the central authority on all data, any mutations to that data must occur within the store. The risk of data pollution is greatly reduced.

What can you tell me about JSX?

When Facebook first released React to the world, they also introduced a new dialect of JavaScript called JSX that embeds raw HTML templates inside JavaScript code. JSX code by itself cannot be read by the browser; it must be transpiled into traditional JavaScript using tools like Babel and webpack. While many developers understandably have initial knee-jerk reactions against it, JSX (in tandem with ES2015) has become the defacto method of defining React components. class MyComponent extends React.Component { render() { let props = this.props; return ( <div className="my-component"> <a href={props.url}>{props.name}</a> </div> ); } }