React Js Interview Questions

React Js and Redux Questions

# React:

• React is javascript front end library developed by facebook.
• React follows uni-directional data flow.
• In react everything is component and it divides ui in independent piece of code.

# Why to use React Or Features Of React?

• We can make Reusable Components.
• You can re-use components anywhere you need. As a result, (1) your app has consistent look and feel, (2) code re-use makes it easier to maintain and grow your codebase, and (3) it is easier to develop your app. eg. Forms , Wizards
• Virtual DOM: Any view changes are first reflected to virtual DOM, then an efficient diff algorithm compares the previous and current states of the virtual DOM and calculates the best way (minimum amount of updates needed) to apply these changes. Finally those updates are applied to the DOM to ensure minimum read/write time. This is the main reason behind React’s high performance
• Improved performance: React uses virtual DOM, which makes web applications perform faster. Virtual DOM compares its previous state and updates only those components in the real DOM, whose states have changed, rather than updating all the components — like conventional web applications.
• Unidirectional data flow: React follows a unidirectional data flow. This means that when designing a React app, we often nest child components within parent components. And since the data flows in a single direction, it becomes easier to debug errors and know where the problem occurs in an application at the moment.
• Easy creation of dynamic applications as it provides less coding and provides more functionality, whereas, with JavaScript applications, code tends to get complex very quickly.
• Dedicated tools for easy debugging: Facebook has released a chrome extension that we can use to debug React applications. This makes the process of debugging React to web applications faster and easier.

# State and props:

• State are the actual javscript objects which stores the properties and behaviours of the component.
• State values are passed down from parent components to child components in the form of props.
• props are the way of communication between the components.

# Redux thunk :

• Used to handle asyn actions.
• Redux thunk is a middleare that lets u call action creators that returns functions instead of an action object.
• That function receives the store's dispatch method, which is then used to dispatch regular synchronous actions inside the body of the Function once the asynchronous operations have completed.

# Real Dom:

• Abstraction of html code.
• Html element becomes node in dom.
• Creates a new dom when html element updates.
• Slow.
• DOM manipulation is very expensive
• Too much of memory wastage.

# Virtual Dom:

• Lightweight Javascript object.
• Abstraction of Real dom.
• React Element becomes node in v dom.
• Updates the JSX if element updates.
• Fast.
• DOM manipulation is very easy
• No memory wastage.

# References in react:

• It is an attribute which helps to store a reference to a particular React element or component.
• It is used to return references to a particular element or component returned by render().

# Fetch

• Fetch has no url in request object.
• Fetch request function includes the url as parameter.
• Fetch request is ok when response object contains the ok property

# Axios:

• Axios has url in request object
• Axios request function does not includes the url as parameter.
• Axios request is ok when status is 200

#Redux:

Redux is the applications state management library which stores the entire state of an applications in the single store.

# Switch:

Switch returns only the first matching route rather than all matching routes.

# Link:

Link is your replacement for anchor tags.

Javascript Questions

# prototype:

• The JavaScript prototype property allows you to add new properties and methods to object constructors.
• function person(first) { this.fName= first}
• person.prototype.nationality = "English";

# promises:

• promises are used to handle asynchronous operations in JavaScript.
• var promise = new promise(function(resolve, reject) {reject('promise Rejected') })
• promise.then(function(successMessage) { }).catch(function(errorMessage) { });

• Definition: Helps you run functions asynchronously, and use their return values (or exceptions) but only once when executed.
• Not Lazy
• Not cancellable( There are promise libraries out there that support cancellation, but ES6 promise doesn't so far). The two possible
• Cannot be retried(promises should have access to the original function that returned the promise to have a retry capability, which is a bad practice)
• Decisions are
  • resolve
  • Reject

# Observables

• Helps you run functions asynchronously, and use their return values in a continuous sequence(multiple times) when executed.
• By default, it is Lazy as it emits values when time progresses.
• Has a lot of operators which simppfies the coding effort.
• One operator retry can be used to retry whenever needed, also if we need to retry the observable based on some conditions retryWhen can be used.

# Hoisting:

a variable can be used before it has been declared.

# Closure:

Inner function can have access to the outer function variables as well as all the global variables. Lets suppose we two function A, B and function B is the child function of function A. We have variable inside the function A and when we access the function A variable inside the function B then there closur gets created.Below example creates and using the closure.

This function can be better represented by using closures

function A() {
    var count = 10;
    return function displayGreet() {
        console.log(count);
    };
}

// Generate the closure
	var B= A();

// Use the closure
	B();

# Shift method:

shift() method take the first element off of the given array and returns it.

# pop method:

pop() method take the last element off of the given array and returns it.

# Delete operator:

The delete keyword is used to delete the key as well as its value of the given object properties.

# unshift method:

The unshift method is used to add or append one or more elements to the begining of an Array.

# push method:

The push method is used to add or append one or more elements to the end of an Array.

# What are escape characters :

Is used to display the special characters in the string .

# What is the use of type of operator:

is an operator which is used to return a string description of the type of a variable.

# What is variable typing:

Variable typing is used to assign a number to a variable and then assign string to the same variable.

# Assign value to object properties:

obj.name="AK"

# append value to an array without using push :

arr[arr.length]=value;

# for-in loop:

for-in loop is used to loop through the javascript object.

#for loop :

for loop is used to loop through the javascript array.

# call:

arguments are passed as individually like object.mymethod.call(object,arg1,arg2,arg3)

# apply:

arguments are passed in the form of array like object.mymethod.call(object,array)

# Object.values

this method returns an array of values form the given object properties

#Object.keys :

this method returns an array of keys form the given object properties

# Functional Components

A functional component is just a plain JavaScript function which accepts props as an argument and returns a React element.

Functional component is easy to read and test.

Functional component ends up with very less code.

You cannot use setState() and Lifecycle Methods in your component.

Functional component is state less component.

# Class Components

Class component requires you to extend from React.Component and create a render function which returns a React element..

Class component will have the State and Life Cycle Methods.

Class compoenent ends with more code as compared to functional components.

# let

block scoped eg. if-block.

Reference errors if let causes errors

Variable declared with let will not affect the value of variable defined outside if block.

var a=11; function test(){ if(a>10){ let a = 20; console.log(a) } console.log(a) } test() o/p: 11 20 11

hoisting not applied.

# const

block scoped eg. if-block.

Type error if we try try to assign the value again to const variables

hoisting not applied.

# var

function scoped i.e any function like test()

Variable declared with var will affect the value of variable defined outside if block.

var a=11; function test(){ if(a>10){ var a = 20; console.log(a) } console.log(a) } test() o/p: 11 20 20

hoisting applied.

# forEach loop :

Lower chance of accidental errors with forEach

Iterates through an array

forEach keeps the variable’s scope to the block

forEach is easier to read

# for loop :

You can break out of a for loop earlier.

Iterates through an array

# What is type of null :

object.

# what is undefined:

variable declared but not assigned the value returns undefined.

# Performence Improvements :

Use lazyloading for slow loading.

Use functional components for presentational components like button,modal.

safe updation.

cdn issues.

find un-neccessary re rendering by using should component update or react.memo.

Performance issues.

#Remove Duplicate Elements from Array:

let nums =[1,2,2,3];

console.log(...new Set(nums)).

#array.map method

let nums =[1,2,2,3];

nums.map(item=> item>1 )

Output: [false,true,true,true]

#array.filter method

let nums =[1,2,2,3];

nums.filter(item=> item>1 )

Output: [2,2,3]

# String to Array

const str="ABC"

console.log(str.split(""));

#Callback:

Passing the parent method into child and calling the passed method from child on any onlcick events.

# Deprecated Life Cycle Methods

ComponentWillRecieveProps() with static GetDerivedStateFromProps()

ComponentWillDidCatch(); with GetDerivedStateFromErrors

# Local storage

local storage can be used to store the user specific deatails and other information.

data persist even on closing the app or browser and Can see the data once the web app is the opened in tab.

Flipkart uses local storage to store most of the user data.

5MB to 10 MB capacity.

# Session storage

Can be used to store th session information.

data does not persist on closing the app or browser tab.

5KB capacity.

# Cookies

Can be used to store th user details like session id ,user searches and other information.

Can be used to identify the existing user or new user.

data persist on closing the app or browser tab.

# Props drilling

Passing props from parent to all childs even if only one child requirs those props.

Can be solved by using contextApi and

Props Drilling (Threading) is a concept that refers to the process you pass the data from the parent component to the exact child Component BUT in between, other components owning the props just to pass it down the chain..

# HOC

Higher-order component is a function that takes a component and returns a new component.

HOC generally used when multiple components have to use a common logic.

Eg. connect, withRouter etc.

Use.

function withNativeBaseHooks(Component) { return function WrappedComponent(props) { const myUseColorModeValue = useColorModeValue("#fff", "#1f2937"); return }; }