Interview questions react

Question 1

What is React?

Answer 1

React is a front-end library developed by facebook. It allows for us to create really nice, reusable front-end UI components.

It can be used to develop complex/interactive Web and Mobile User Interfaces. It has a relatively massive amount of support.

Question 2

What are some of the features of React?

Answer 2

• Uses virtual DOM instead of the actual DOM.
• Uses server-side rendering
• follows uni-directional flow for data binding

Question 3

What are the limitations of React?

Answer 3

• It’s just a library, not a full framework.
• Its library is large and takes time to understand.
• It can be difficult for novice programmers.
• It can be complex with inline templating and JSX

Question 4

What are some advantages of React?

Answer 4

• Increases application performance.
• Can be used on both client and server side.
• JSX increases code readability.
• Easy to integrate with other frameworks.
• Writing UI test cases is easy.

Question 5

What is JSX?

Answer 5

JavaScript XML. Utilizes JavaScript expressiveness with HTML-like template syntax.

-Becomes really easy to understand

Question 6

What is the virtual DOM? How does it work?

Answer 6

It is a lightweight JavaScript object which is just a copy of the real DOM. It treats the elements, attributes, and contents as Objects as their properties.

-The render function creates a node tree out of the React components. It updates the tree in response to mutations in data model.

Question 7

What is the difference between the real and virtual DOM?

Answer 7

Real:

• Updates slow.
• Can directly update HTML
• Creates a new DOM if element updates.
• DOM manipulation is expensive.
• Too much memory wasted.

Virtual:

• Updates fast
• Cannot directly update HTML
• Updates JSX if element updates.
• DOM manipulation is easy.
• No memory waste.

Question 8

Why can’t browsers read JSX?

Answer 8

Browsers can read JavaScript objects, but JSX is not a regular JavaScript object.

• To enable the browser to read JSX, we need to transform a JSX file to a JavaScript object using a transformer like Babel.
• After transforming, pass it to the browser.

Question 9

How different is React’s ES6 syntax when compared to ES5?

Answer 9

1: Use import instead of require.
2: Use export instead of module.exports.
3: Extend component instead of using function to render a component.
4: props change.
5: State declared in constructor instead of getInitialState.

Question 10

How is React different from angular?

Answer 10

React:

• Only the view of MVC
• Server side rendering
• Uses virtual DOM
• One-way data binding
• Compile time debugging
• Made by facebook

Angular:

• Complete MVC
• Client side rendering
• Uses real DOM
• Two-way data binding
• Run time debugging
• Made by Google

Question 11

What do you understand from “In React, everything is a component.”

Answer 11

Components are the building blocks of a React application’s UI. These components split up the entire UI into small independent and reusable pieces. Then it renders each of these components independent of each other without affecting the rest of the UI.

Question 12

Explain the purpose of render() in React.

Answer 12

Each React component must have a render() mandatorily. It returns a single React element which is the representation of the native DOM component. If more than one HTML element needs to be rendered, then they must be grouped together inside one enclosing tag such as , ,<div> etc. This function must be kept pure i.e., it must return the same result each time it is invoked.</div>

Question 13

How can you embed two or more components into one?

Answer 13

Place them both inside a form, group, div tag, etc.

Question 14

What are props?

Answer 14

Props are shorthand for ‘properties’ in react. They are read-only and are immutable. Must be passed down from parent to child. Child CANNOT send a prop back to a parent.

Question 15

What is state?

Answer 15

Are the source of data
Must be kept simple.
They are the objects which determine component rendering and behavior.
They are mutable, and can be used to create dynamic and interactive components.

Question 16

Difference between state and props?

Answer 16

The parent component does not change the state value, while it does for props.

State changes inside of the actual component, while props change inside of the child components.

Question 17

How can you update the state of a component?

Answer 17

this.setState();

Question 18

What is the arrow function in React? How is it used?

Answer 18

They allow functions to bind the context of the components properly since in ES6 auto binding is not available by default.

Question 19

Difference between stateful and stateless component?

Answer 19

Stateful:

• Stores info about state change in memory.
• Has authority to change state
• Contains knowledge of past, present, and future changes in state.
• Notified by stateless components about the requirement of the state change, and then send props down.

Stateless:

• Calculates internal state of components.
• Does not have authority to change state.
• Contains no knowledge of past, present, and future state changes.
• Receives props from stateful components and treat them as callbacks.

Question 20

What are the three phases of React’s component’s lifecycle?

Answer 20

1: Initial Rendering Phase:
- Component is about to start its life journey and make its way to the DOM.

2: Updating Phase:
- Component is added to DOM, and it can get updated or re-rendered only when a prop or state change occurs.

3: Unmounting Phase:
- Component is destroyed and removed from DOM.

Question 21

Explain the React lifecycle methods in detail

Answer 21

1: componentWillMount()
- Executed just before rendering takes place both on the client as well as server-side.

2: componentDidMount()
- Executed on the client side only after the first render.

3: componentWillReceiveProps() - Invoked as soon as the props are received from the parent class and before another render is called.
4: shouldComponentUpdate() - Returns true or false value based on certain conditions. If you want the component to update, return true else return false. By default, it returns false.
5: componentWillUpdate() - Called just before rendering takes place in the DOM.
6: componentDidUpdate() - Called immediately after rendering takes place.
7: componentWillUnmount() - called after the component is unmounted from the DOM. It is used to clear up the memory spaces.

Question 22

What is an event in React?

Answer 22

• Events are the triggered reactions to specific actions like mouse hover, click, key press, etc.

Slight syntactical differences from DOM elements:

• Events are named using camel case.
• Events are passed as functions

Question 23

How do you create an event in React?

Answer 23

render the element with the event property calling the function.

Question 24

What are synthetic events in React?

Answer 24

Synthetic events are the objects which act as a cross-browser wrapper around the browser’s native event. They combine the behavior of different browsers into one API. This is done to make sure that the events show consistent properties across different browsers.

Question 25

What do you understand by refs in React?

Answer 25

Refs is the short hand for References in React. It is an attribute which helps to store a reference to a particular React element or component, which will be returned by the components render configuration function. It is used to return references to a particular element or component returned by render(). They come in handy when we need DOM measurements or to add methods to the components.

Question 26

What are some cases where you should use Refs?

Answer 26

• When you need to manage focus, select text or media playback.
• To trigger imperative animations
• Integrate with third-party DOM libraries

Question 27

How do you modularize code in React?

Answer 27

By using the export and import properties, you can write components separately in different files.

Question 28

How are forms created in React?

Answer 28

In React, the state is contained in the state property of the component, and is ONLY updated via setState. Elements cannot directly update their state.

Question 29

What do you know about controlled and uncontrolled components?

Answer 29

Controlled:

• Do not maintain own state.
• Data is controlled by parent component.
• Take in current values through props and then notify changes via callbacks.

Uncontrolled:

• Maintain own state
• Data is controlled by DOM
• Refs are used to get current values.

Question 30

What are Higher Order Components? (HOC)

Answer 30

HOC are custom components which wraps another component within it.

They ccan accept any dynamically provided child component, but won’t modify or copy any behavior from input components. Are ‘pure’.

Question 31

What can you do with HOC?

Answer 31

• Code reuse, logic and bootstrap abstraction
• Render High Jacking
• State abstraction and manipulation
• Props manipulation

Question 32

What are Pure Components?

Answer 32

Pure components are the simplest and fastest components which can be written. They can replace any component which one has a render(). These components enhance the simplicity of the code and performance of the application.

Question 33

What is the significance of keys in React?

Answer 33

Keys are used for identifying unique Virtual DOM Elements with their corresponding data driving the UI.
They help React to optimize the rendering by recycling all the existing elements in the DOM.
These keys must be a unique number or string, using which React just reorders the elements instead of re-rendering them.
-Leads to an increase in application performance.

Question 34

What were the major problems with MVC framework?

Answer 34

• DOM manipulation was expensive.
• Applications were slow and inefficient
• Huge memory wastage
• Because of circular dependencies, complicated model was created around models and views.

Question 35

Explain Flux

Answer 35

An architectural pattern which enforces the uni-directional data flow.

It controls derived data and enables communication between multiple components using a central Store which has authority for all data. Any update in data throughout the application must occur here only. Flux provides stability to the application and reduces run-time errors.

Question 36

What is Redux?

Answer 36

Redux is one of the hottest libraries for front end development in today’s marketplace. It is a predictable state container for JavaScript applications and is used for the entire applications state management. Applications developed with Redux are easy to test and can run in different environments showing consistent behavior.

Question 37

What are the three principles that Redux follows?

Answer 37

1: Single source of truth:
The state of the entire application is stored in an object/state tree within a single store. The single state tree makes it easier to keep track of changes over time and debug or inspect the application.

2: State is read-only:
The only way to change the state is to trigger an action. An action is a plain JS object describing the change. Just like state is the minimal representation of data, the action is the minimal representation of the change to that data.

3: Changes are made with pure functions:

In order to specify how the state tree is transformed by actions, you need pure functions. Pure functions are those whose return value depend solely on the values of their arguments.

Question 38

What do you understand by “Single source of truth”?

Answer 38

Redux uses ‘Store’ for storing the application’s entire state at one place. So all the component’s state are stored in the Store and they receive updates from the Store itself. The single state tree makes it easier to keep track of changes over time and debug or inspect the application.

Question 39

List down the components of Redux.

Answer 39

Action - An object that describes what happened.
Reducer - It is a place to determine how the state will change.
Store - State/Object tree of the entire application is saved in the Store.

View - Simply displays the data provided by the Store.

Question 40

How does the data flow through Redux?

Answer 40

https://d1jnx9ba8s6j9r.cloudfront.net/blog/wp-content/uploads/2017/09/flowda-768x333.png

Question 41

How are Actions defined in Redux?

Answer 41

Actions in React must have a type property that indicates the type of ACTION being performed. They must be defined as a String constant and you can add more properties to it as well.

In Redux, actions are created using the functions called Action Creators.

Question 42

Explain the role of a Reducer.

Answer 42

Reducers are pure functions which specify how the application’s state changes in response to an ACTION. Reducers work by taking in the previous state and action, and then it returns a new state. It determines what sort of update needs to be done based on the type of the action, and then returns new values. It returns the previous state as it is, if no work needs to be done.

Question 43

What is the significance of Store in Redux?

Answer 43

A store is a JavaScript object which can hold the application’s state and provide a few helper methods to access the state, dispatch actions and register listeners.

The entire state/object tree of an application is saved in a single store. As a result of this, Redux is very simple and predictable. We can pass middleware to the store to handle processing of data as well as to keep a log of various actions that change the state of stores. All the actions return a new state via reducers.

Question 44

How is Redux different from Flux?

Answer 44

Flux:

1: The Store contains state and change logic.
2: There are multiple stores.
3: All the stores are connected and flat.
4: Has singleton dispatcher
5: React components subscribe to the store
6: State is mutable.

Redux:

1: Store and change logic are separate
2: There is only one store.
3: Single store with hierarchical reducers.
4: No concept of dispatcher.
5: Container components utilize connect.
6: State is immutable.

Question 45

What are the advantages of Redux?

Answer 45

Predictability of outcome - Since there is always one source of truth, there is no confusion about how to sync the current state with actions and other parts of the application.

Maintainability - The code becomes easier to maintain with a predictable outcome and strict structure.

Server side rendering - You just need to pass the store created on the server to the client side. This is very useful for initial rendering and provides a better user experience as it optimizes the application performance.

Developer tools - From actions to state changes, developers can track everything going on in the application in real time.

Community and ecosystem - Redux has a huge community behind it which makes it even more captivating to use. A large community of talented individuals contribute to the betterment of the library and develop various applications with it.

Ease of testing - Redux’s code is mostly functions which are small, pure, and isolated. This makes the code testable and independent.

Organization - Redux is precise about how code should be organized, this makes the code more consistent and easier when a team works with it.

Question 46

What is React Router?

Answer 46

React Router is a powerful routing library built on top of React, which helps in adding new screens and flows to the application.

This keeps the URL in sync with data that’s being displayed on the web page. It maintains a standardized structure and behavior and is used for developing single page web applications. React Router has a simple API.

Question 47

Why is switch keyword used in React Router v4?Refs is the short hand for References in React. It is an attribute which helps to store a reference to a particular React element or component, which will be returned by the components render configuration function. It is used to return references to a particular element or component returned by render(). They come in handy when we need DOM measurements or to add methods to the components.

Answer 47

Although a <div> is used to encapsulate multiple routes inside the Router, the ‘switch’ keyword is used when you want to display only a single route to be rendered amongst the several defined routes. The tag when in use matches the typed URL with the defined routes in sequential order. When the first match is found, it renders the specified route, thereby bypassing the remaining routes.</div>

Question 48

Why do we need a Router in React?

Answer 48

A Router is used to define multiple routes and when a user types a specific URL, if this URL matches the path of any ‘route’ defined inside the router, then the user is redirected to that particular route. We need to add a router library to our app that allows creating multiple routes with each leading to us a unique view.

Question 49

List the advantages of React Router

Answer 49

1: Just like how React is component-based, so is React-Router. A router can be visualized as a single root component in which we enclose specific child routes.
2: No need to manually set a history value. In React Router v4 all we need to do is wrap them within BrowserRouter.
3: The packages are split. Three packages one each for web, native, and core. It supports the compact size of our app. It’s easy to switch over based on similar coding style.

Question 50

How is React Router different from conventional routing?

Answer 50

Conventional:

• Each view corresponds to a new file.
• A HTTP request is sent to the server and corresponding HTML page is received.
• User actually navigates across different pages for each view.

React

• Only single HTML page is involved.
• Only history attribute is changed.
• User is duped into thinking they are navigating across different pages.