React Interview Questions and Answers | React Tutorial | React Redux Online Training | Edureka

Copyright © 2017, edureka and/or its affiliates. All rights reserved.
Agenda
❑ What Is Artificial Intelligence ?
❑ What Is Machine Learning ?
❑ Limitations Of Machine Learning
❑ Deep Learning To The Rescue
❑ What Is Deep Learning ?
❑ Deep Learning Applications

React In Market
• React is front-end JavaScript
library developed by Facebook
in 2013.
• It is open-sourced and follows
the component based
approach.
• Facebook deployed React in its
newsfeeds in 2011, which
improved its UI drastically.
• Its maintained by Facebook
and Instagram.

React Job Trends
Below are the number for job postings for Spring Framework professionals on various job portals as on Sep 2017
Job Trend In India Job Trend In USA

React Job Trends

Interview Questions
Let’s find out frequently asked questions in interviews.

React Interview Questions
1. What is React?

1. What is React?
• Frontend JavaScript library
• Developed by Facebook in 2011
• Follows component based approach
• It allows to create reusable UI components
• Used to develop complex, interactive web as well as mobile UI
• Open-sourced in 2015 and has strong foundation and large community

2. What are the features of React?

2. What are the features of React?
• It uses Virtual DOM instead of Real DOM
• Does Server-side rendering
• Follows Uni-directional data flow i.e one way data binding

3. List some of the major advantages of React.

3. List some of the major advantages of React.
• Increases applications performance
• Can be used on client as well as server side
• Readability of the code is improved
• Can be easily used with other frameworks
• It is extremely easy to write UI test cases

4. What are the limitations of React?

4. What are the limitations of React?
• Not a full scale framework i.e its just the view
• It’s library is quite large
• Difficult to understand for novice programmers
• Uses inline templating and JSX

5. What is JSX?

5. What is JSX?
• JSX stands for JavaScript XML
• Utilizes the expressiveness of JavaScript with a HTML – like template syntax.
• Makes HTML easy to understand
• It is Robust
• Boosts up the JS performance
• JSX expression must have only one outermost element
JSX

6. What do you understand by Virtual DOM? Explain its working.

6. What do you understand by Virtual DOM? Explain its working.
• Lightweight JavaScript object which is the copy of the real DOM.
• It works in 3 simple steps:
i. Whenever any underlying data changes, the entire UI is re-rendered in Virtual DOM representation.
ii. Then the difference between the previous DOM representation and the new one is calculated.
iii. Once the calculations are done, the real DOM will be updated with only the things that have actually changed.
Virtual
DOM
Real
DOM

7. Differentiate between Real DOM and Virtual DOM.

7. Differentiate between Real DOM and Virtual DOM.
Virtual DOM Real DOM
1. Updates faster 1. Updates Slower
2. Can’t directly update HTML 2. Can directly update HTML
3. Updates if JSX element renders 3. If elements updates creates a new DOM
4. No DOM manipulation expense 4. DOM manipulation is very expensive
5. No memory wastage 5. Too much of memory wastage

8. Why browsers can’t read JSX?

8. Why browsers can’t read JSX?
• JSX is not a regular JavaScript.
• Browsers can read JavaScript objects only.
• JSX file is converted to JS object by JSX Transformer like Babel, before reaching Browser.
JSX File JSX Transformer JavaScript Object Browser

9. What do you understand from ‘In React everything is a component’?

9. What do you understand from ‘In React, everything is a component’?
• Components are building blocks of React application’s UI.
• Components splits the UI into independent, reusable pieces, and renders each piece independently
• JavaScript functions which takes in arbitrary inputs and returns HTML representation.
1
3
4
2
5
1
3
4
2
5

10. Explain the purpose of render() in React.

10. Explain the purpose of render() in React.
• Every component must have a render().
• It is returns single React element which is the representation of native DOM component.
• HTML elements inside render() must be enclosed inside an enclosing tag like <div>,<group>,<form> etc.
• Should be a pure function.

11. How can you embed two components into one?

11. How can you embed two components into one?
class MyComponent extends React.Component{
render(){
return(
<div>
<h1>Hello</h1>
<Header/>
</div>
);
}
}
class Header extends React.Component{
render(){
return <h1>Header Component</h1>
};
}
ReactDOM.render(
<MyComponent/>, document.getElementById('content')
);

12. Explain props in React.

• Short for properties.
• Are Read-only.
• Are pure i.e. immutable
• Always passed down from
parent to child component
• Used to render dynamic data
render(){
return(
<div>
<h1>Hello</h1>
<Header name="maxx" id="101"/>
</div>
);
}
}
function Header(props) {
return (
<div>
<h1> Welcome : {props.name}</h1>
<h1> Id is : {props.id}</h1>
</div>
);}}
ReactDOM.render(<MyComponent/>, document.getElementById('content'));
12. Explain props in React.

13. What is a state in React and how it is used?

• Heart of react components
• Must be kept as simple as possible
• Determines components rendering and behavior
• Creates dynamic and interactive components
• It is accessed via this.state()
• Can update the state using this.setState()
class MyComponent extends React.Component {
constructor() {
super();
this.state = {
name: 'Maxx',
id: '101'
}
}
render()
{
return (
<div>
<h1>Hello {this.state.name}</h1>
<h2>Your Id is {this.state.id}</h2>
</div>
);
}
}
ReactDOM.render(
<MyComponent/>, document.getElementById('content')
);
13. What is a state in React and how it is used?

14. Differentiate between state and props?

14. Differentiate between state and props?
Conditions State Prop
1. Receive initial value from parent Component
2. Parent Component can change value
3. Set default values inside Component
4. Changes inside Component
5. Set initial value for child Components
6. Changes inside child Components

15. How can you update state of a component?

15. How can you update state of a component?
• Using this.setState()
function you can
change the states of
the component.
class MyComponent extends React.Component {
constructor() {
super();
this.state = {
name: 'Maxx', id: '101'
}
}
render()
{
setTimeout(()=>{this.setState({name:'Jaeha', id:'222'})},2000)
return (
<div>
<h1>Hello {this.state.name}</h1>
<h2>Your Id is {this.state.id}</h2>
</div>
);
}
}
ReactDOM.render( <MyComponent/>, document.getElementById('content'));

16. What is arrow function? How its used?

16. What is arrow function? How its used?
• Also called ‘fat arrow function’ ( => )
• Allows to do bind the context of components properly since auto-binding is not available by
default in ES6.
• Makes easier to work with higher order functions.
render() {
return(<MyInput onChange={
this.handleChange.bind(this) } />)
}
render() {
return(<MyInput onChange={ (e) =>
this.handleOnChange(e) } />)
}
General Way With Arrow Function

17. Differentiate between stateful and stateless components.

17. Differentiate between stateful and stateless components.
Stateful Component Stateless Component
1. Stores info about components state change in memory 1. Calculates the internal state of the components
2. Have authority to change state 2. Do not have the authority to change state
3. Contains the knowledge of past, current and possible
future changes in state
3. Contains no knowledge of past, current and possible
future state changes
4. Stateless components notifies them about the
requirement of the state change, then they send down
the props to them.
4. They receive the props from the Stateful components
and treat them as callback functions.

18. What are the different phases of React component’s lifecycle?

getDefaultProps()
getInitialState()
componentWillMount()
render()
componentDidMount()
componentsWillUnmount()
componentsWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
Initial
Phase
Updating
Phase
Unmounting
Phase
18. What are the different phases of React component’s lifecycle?

19. Explain the lifecycle methods of React components in details.

19. Explain the lifecycle methods of React components in details.
• componentWillMount() is executed just before rendering both on client and server-side
• componentDidMount() is executed after first render only on the client side
• componentWillReceiveProps() is invoked as soon as the props are received from parent
class before another render is called.
• shouldComponentUpdate() returns true or false value based on certain conditions. If you
want your component to update return true else return false. By default its false.
• componentWillUpdate() is called just before rendering takes place.
• componentDidUpdate() is called just after rendering takes place.
• componentWillUnmount() is called after the component is unmounted from the dom. It is
used to clear up the memory spaces.

20. What is an event in React?

• Events are the triggered reactions to specific actions like mouse hover, mouse click, key press
etc.
• React events are similar to HTML, JavaScript events.
20. What is an event in React?
ACTION: Switch ON

21. How do you create an event in React?

21. How do you create an event in React?
class Display extends React.Component({
show(evt) {
// code
},
render() {
// Render the div with an onClick prop (value is a function)
return <div onClick={this.show}>Click Me!</div>;
}
});

22. What are synthetic events in React?

• Cross browser wrappers around the browsers native event system.
• Combines the browsers behaviors into one API.
• Done to ensure events have consistent properties across different browsers.
22. What are synthetic events in React?

23. What do you understand by refs in React?

• Refs stands for References
• Used to return references to a particular element or component returned by render().
• useful when we need DOM measurements or to add methods to the components
23. What do you understand by refs in React?

24. List some of the cases when you should use Refs.

• Managing focus, text selection or media playback
• Triggering imperative animations
• Integrating with third-party DOM libraries
24. List some of the cases when you should use Refs.

25. How do you modularize code in React?

export default class ChildComponent
extends React.Component {
render() {
return(
<div>
<h1>This is a child
component</h1>
</div>
)
}
}
import ChildComponent from
'./childcomponent.js';
class ParentComponent extends
React.Component {
render() {
return(
<div>
<App />
</div>
)
}
}
By using the export and import properties we can write the components separately in different files.
25. How do you modularize code in React?

26. How React syntax changed from ES5 to ES6?

26. How React syntax changed from ES5 to ES6?
show(){..}
render(){
return(
<div>
<h1>Hello</h1>
</div>
);
}
}
var MyComponent = React.createClass({
display : function () {..} ,
render : function () {
return(
<div>
<h1>Hello</h1>
</div>
);
}
});
ES5 ES6

27. How forms are created in React?

27. How forms are created in React?
• HTML form elements maintain their own state in regular DOMs and update themselves
based on user inputs.
• In React, state is contained in the state property of the component and is only updated
via setState().
• JavaScript function is used for handling the form submission.

28. What do you know about controlled and uncontrolled components?

28. What do you know about controlled and uncontrolled components?
Controlled Components
• Do not maintain their own state.
• Data is controlled by parent component.
• Takes in current values through props and
notifies changes via callbacks
Uncontrolled Components
• Maintain their own state.
• Data is controlled by DOM.
• Refs are used to get their current value

29. What are higher order components?

29. What are higher order components?
• Custom components which wraps another component.
• They accept dynamically provided child components.
• Do not modify the input component.
• Do not copy any behavior from the input component
• Are “Pure” functions.
<HigherOrderComponnent/>
<InnerComponnent/>

30. When can you do with HOC?

30. When can you do with HOC?
• Code reuse, logic and bootstrap abstraction
• Render High jacking
• State abstraction and manipulation
• Props manipulation

31. What is the significance of keys in React?

31. What is the significance of keys in React?
• Used to identify unique Virtual DOM Elements with their corresponding data driving the UI
• Helps React to optimize rendering by recycling existing DOM elements
• Keys must be a unique number or string
• Instead of re-rendering, with keys React just re-orders the elements
• Application's performance increases

32. What are Pure Components?

32. What are Pure Components?
• Pure components are the simplest, fastest components which we can write.
• Can replace any component that only has render().
• Enhances the simplicity and performance of the application.
ReactDOM.render(<h1>Hello</h1>, document.getElementById('content'));

33. Major problems with MVC framework?

33. Major problems with MVC framework?
• DOM manipulation was very expensive
• Slow and inefficient
• Memory wastage
• Because of circular dependencies, complicated model was created around models and views
Controller
ModelView

34. Explain Flux.

34. Explain Flux.
• Architectural pattern that enforces uni-directional data flow
• Controls derived data and enables communication between multiple components
• Contains a central Store which has authority for all data
• Any update in data must occur here only
• Provides stability to the application
• Reduces run-time errors
Action Dispatcher Store View
Action

35. What is Redux?

35. What is Redux?
• Redux one of the hottest libraries for front end development
• Redux is a predictable state container for JavaScript apps
• Mostly used for applications State Management
• Applications developed with Redux are easy to test.
• Helps to write applications that behave consistently and can run in different environments

36. What are the three principles that Redux follows?

36. What are the three principles that Redux follows?
1. Single source of truth
2. State is read-only
3. Changes are made with pure functions

37. What do you understand by single source of truth?

37. What do you understand by single source of truth?
• Redux uses Store for storing all the application state
at one place.
• Components state is 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.
Store

38. List down the components of Redux.

38. List down the components of Redux.
1. Action - It's an object that describes what happened.
2. Reducer - It is a place to determine how the state will change
3. Store – State/Object tree of the entire application is saved in the store.
4. View – Simply displays the data provided by the Store.

39. How the data flows through Redux?

39. How the data flows through Redux?
Reducers
Provider
Component
Actions
One Store
Container
(Dumb Component)
Container
(Smart Component)
Re-render when
Store changes
Pass Data As
Props
Store
Store
Store

40. How Actions are defined in Redux?

40. How Actions are defined in Redux?
function addTodo(text)
{
return
{
type: ADD_TODO,
text
}
}
• Must have type property that indicates the type of
ACTION being performed.
• They must be defined as String constant.
• You can add more properties to it.
• Actions are created using functions called Action Creators

41. Explain the role of Reducer.

41. Explain the role of Reducer.
• Reducers are pure functions which specify how the applications
state changes in response to an ACTION.
• Takes in the previous state and an action and returns the new
state
• Determines what sort of update needs to be done based on the
type of the action, and returns new values
• It returns the previous state if no work needs to be done
Reducer
Prev State ACTION
New State

42. What is the significance of Store in Redux?

42. What is the significance of Store in Redux?
• A store is a JavaScript object which can hold the application's state and
• It provides a few helper methods to access the state, dispatch actions and register listeners.
• With Store the data state can be synchronized from the server level to the client layer
without much hassle.
• This makes the development of large applications easier and faster.
import { createStore } from 'redux'
import todoApp from './reducers’
let store = createStore(reducer);

43. How Redux is different from Flux?

43. How Redux is different from Flux?
FLUX
• Store contains state and change logic
• Multiple stores
• Flat disconnected stores
• Singleton dispatcher
• React components subscribe to the store
• State is mutated
REDUX
• Store and change logic are separate
• Single Store
• Single store with hierarchical reduces
• No dispatcher
• Container components utilize connect
• State is immutable

44. What are the advantages of Redux?

44. What are the advantages of Redux?
1. Predictability
2. Maintainability
3. Server side rendering
4. Developers tool
5. Huge community
6. Ease of testing
7. Precise organization of code

45. How React is different from Angular?
React Topic Angular
View Architecture MVC
SSR Rendering CSR
Virtual DOM DOM Real DOM
One Way Binding Data Binding
Two Way
Binding
Compile Time Debugging Run Time
Facebook Author Google

Popularity

React Interview Questions and Answers | React Tutorial | React Redux Online Training | Edureka

Recommended

More Related Content

What's hot (20)

Similar to React Interview Questions and Answers | React Tutorial | React Redux Online Training | Edureka (20)

More from Edureka! (20)

Recently uploaded (20)

React Interview Questions and Answers | React Tutorial | React Redux Online Training | Edureka