React , Redux , Typescript, React Native— Interview Questions

These are some commonly asked interview questions. Let’s check them out, in this article.

Javascript

What is DOM ?

DOM — Document object model used as a programming interface for HTML and / or XML documents. It generally represents as nodes and objects, and symbolises a tree structure.

Explain Javascript Promises ?

Promise in javascript is object resolution for asynchronous request, either results a successful completion or failure.

The promise states are 1. Pending, 2. Fulfilled, 3. Rejected.

When an Async request is made, the request is in pending state, it will either resolve the request by Fulfilled status returning the result or rejecting the request with the error reason.

— If you have to display a page after resolving multiple Promises, then use Promise.all() — it waits for all the promises to be resolved or any to be rejected. It will result a set of values of the Promises resolved or rejected.

Here if any one promise fails, it will return with the reason of the failure from the promise that rejected

— if you want to display the end result by deciding upon the results on each and every Promise made thats either resolved or rejected. make use of Promise.allsettled().

Here each and every result of the Promise is returned.

— Promise.any() — takes an iterable object, as one of the promises in the iterable object fulfills, it resolves that single promise result.

— Promise.race() — takes any iterable object of Prommises. It will wait till any of the Promises are rejected or resolves

Explain try, catch, throw, finally ?

try : it is where code block executes, and resolves.

catch : it is the default error block that handles the error.

throw : it is the custom error block where customised errors are handled.

finally : after try and catch, irrespective of their executions, finally will be called.

What is the difference between Map and For-Each ?

When the mutation is not acceptable, We use map over for each.

Map : returns a new array up on computing the existing inputed array.

Example : Fiddle link Here

For each : as it supports mutation of the input passed and doesn’t return any thing.

Map Example in React : if you want to display list of items as HTML list, We can use map, which will transform the given array of list with new HTML list.

For each Example : in reducer, after fetching some transaction data, and got the response object of amount with string values and you need to convert it into integer values. Here the input object fetched from API is mutated.

What are Map, Reduce, Filter ?

Map : A map is an object that hold key value pairs of the input stream. it iterates the given element in insertion order and returns a new transformed array. Here the data is not manipulated, the data is transformed.

Example : transforming or representing the raw array list into HTML list structure, with out mutating the data inside it. In short, It gives a transformed array with the same values.

Reduce : It reduces a given array of values to a single value. it reduces the array with provided array of values with the provided function to it. for reducing an array, the array must consists of values.

Filter : Filter is used to return an end result , when the given condition satisfies.

What is pure function ?

PF accepts an input and returns a value without modifying any data outside its scope(Side Effects) and should return a value.

Difference between Let and Var ?

https://medium.com/nerd-for-tech/javascript-5feb3c6cfd6b

What is Sync and Async in Javascript ?

Async : Ajax calls are best examples for Async, Where they are called continuously until a response is received.

Sync : Manipulations of DOM , that is sequentially manipulating the dom after one after the other is called Sync.

Javascript is also Synchronous and Single threaded.

What is the Spread Operator ?

Spread operator — It’s a ES6 feature. It takes an iterable Array and expands it into individual elements. It is basically used for making the shallow copies. it is generally used by starting with three ellipses.

What is the difference between Library and Framework ?

Library : In general terms, a library is a specific package where it solves a specific functionality. The entire Architecture has to be customised with different libraries.

Example : React JS, is a library where it only related to UI which is only responsible for C in MVC (Model View Controller).

Framework : In general terms, a framework is responsible for entire architecture of the applications.

Example : Angular JS, is a Web framework, where MVC (Model View Controller) is entirely composed by Architecture of the Angular.

What is the difference between === and == ?

Triple Equals ( === ) : used to compare the values of variable by considering the Datatypes of the variables. When two variables are compared then the datatypes must be same.

Double equals : It ignores the data types of the variables and just compares the values.

What is uni-directional and bi-directional Data flows ?

BiDirectional : On front end, data flows from the view to server due to user interactions (for eg. button click). Similarly data flows back to the view from the server in case of server updates.

view can be updated by Server / Controller also model, So the Data flow is bi directional.

So application loses the track as where the data has been changed and it will be hard to manage.

UniDirectional : Data flows from View that dispatches the data through actions to the store. Here the View updates through state from state.

What are object literals ?

Object literals are the key value pairs that are enclosed in curly braces. they return results based on the matched key. They are pretty same as switch case and can used in place of it.

Example : Fiddle Link Here

What is Mixins in Javascript ?

Mixin is a class that contains methods, and can be used by other classes with out inheriting them.

The main difference between Mixin and HOC’s are Mixin can setState, where HOC’s work based on props and returns new class or component.

Typescript

What is Typescript ?

Typescript is a super set language of javascript. Every running code of javascript is valid in Typescript. Typescript is a type checker used for tackling the issues of javascript.

As javascript is a dynamic typing and can only know at run time, Type script adds type checking at compile time, so the developer can find errors while writing code with out running the script file.

What are build in and user defined types ?

The built in types of typescript : are number, string, boolean, null, undefined and void.

the user defined are : Classes, interfaces, types, Enumerations etc.,

What is Class ?

Class is a blueprint of real time objects. It helps to relate to real world entities.

What is interface ?

It is used to give shape to the values and structure to the object.

What is module ?

A module is a group of related classes, functions, variables etc., It cannot be accessed directly. To use a module, the module has to be exported and then imported in the file where it has been used.

Examples : Utility files, Library files, etc..,

React

What is React ?

React is a front end library, used for creating ui workflows or web apps. Maintained by Facebook in 2011.

What is Virtual DOM ?

Virtual DOM is an Abstraction of real DOM. It only updates the parts of the document by abstracting the actual DOM.

What is State and Props ?

State : It is the data container belongs to particular component. All the state of the component is stored in the state. State is scoped with in the component. State can be changed through setState of Class component or function returned by the useState Hook in Functional Component.

State updates the values synchronously. It will return the newly changed state and cannot immediately update the component as it has queued up state updates in place. We can pass a call back function to do any operations.

Props : props are the short forms of Properties. they are passed by the parent components. they cannot be mutated by the child components. Child components can only consume them. when ever the actual mutation done, the child component has to be re rendered. you can pass objects, arrays, strings, functions, components etc as props.

What are service workers ?

Service workers are scripts that are run by the browsers. They do not have any direct relation ship with DOM.

They are used in following scenarios :

1. It caches parts of your websites to make load faster.
2. even if there is a connection lost, user can continue the application in offline.
3. they enable notifications and pish API’s which are not supported by traditional Web technologies.
4. They help us for background sync and makes user feel for continuous user experience

What is an HOC or Higher Order Component ?

An HOC is an advanced technique in React for re using component logic. they are the patterns that emerges from React’s composition nature

What is a strict mode ?

when strict mode is used, — it helps to trigger warnings when rules are violated.

Example : When you don’t use keys in map, it throws a warning regarding key violation

Can we use setState in useEffect ?

useEffect and useState are React hooks used for side effects and setting up page state. There are few limitations while using the combo.

1. Don’t use useState with useEffect while fetching data if no dependency is passed, Since it makes the component to fall into infinite loop of setting page state and make the page unresponsive.
2. when a dependency is passed to useEffect, then there will be no side effects using useState in useEffect.

What is the difference between real DOM and Virtual DOM ?

DOM — is a tree structure which represent the HTML / XML as nodes and objects. It is a Programming Interface for the browsers.

Virtual DOM — it is an Abstract of DOM or a Copy of DOM. Where it only updates the parts of Actual DOM and replaces them.

Since manipulating Virtual DOM is cheaper than real DOM. React uses Virtual DOM for updating the parts of DOM where actual change is needed. React uses Diffing Algorithm to compare the nodes and update them.

What are React Hooks ?

Class components in React / Javascript multiple levels of inheritance, that quickly increases over all complexity and potential for errors. And the composition with the Functions are always a win, this is why using functional components is always a better approach than Class Components.

Explain each React Hook in brief with example ?

useState : used to set state of the component.

useContext : use to set the global data of the app.

useReducer : used to set state of the page for complex data operations. Note : useReducer is same as Reducers in Redux, as they are pure functions which accepts the values and return new state. React recommends using useReducer over useState if next state is dependent on previous state.

useEffect : used for side effects, such as setting title of the application, fetch some data before the page has been loaded.

It accepts a function as first parameter and array as second parameter

When Array is not passed, it will be called each time, when ever the component re renders.

When an empty array is passed, it will be called on first time rendering of the component.

When a value is passed in array, useEffect is called when ever the value is changed.

useRef : use for referring an element of html.

Example : used for setting focus of the input element, or do some operations based on type of reference.

useCallback : it accepts an inline call back function with the array of dependencies, it calls when ever the dependency is changed. .

useMemo : returns a memoized value when dependency is changed.

customHooks : used to separate the logic from the component. Consider a fetch example where a page needs to fetch data from api and should return a loading state, error value and a response from async API. this logic can be separated by custom hook. Note : custom hooks should be started with keyword ‘use’.

What is Context API in React ?

React uses context API for sharing common data across the web application such as externalised content, authentication tokens used with in web apps, sharing themes across the site etc.,

The traditional Class components require Provider and Consumer components. the functional components requires just Provider component to be wrapped and useContext hook is used for extracting the context created.

What is memoization in React ?

Memoization in React is used for returning the cached results if the inputs are same. So that it increases the performance as for example if you are searching for some fruits in a search bar, after searching for the desired fruits in list, you want to search the same fruit that you searched for the first time. The React memo caches the results for particular fruit, when searched again, it simply returns the cached results, thus by avoiding the re rendering the component.

What is the difference between Client side rendering and Server side rendering ?

Client Side : Here the back end and Front end are different sources. the client is front end where it make requests server to send / get / post data. in simple terms, HTML page is rendered in client machine and then does requests.

Example : Normal React Applications or Gatsby.

Front end sends data to Back end and responds accordingly, in simple terms : HTML Page is rendered in Client Side.

Server Side : Here the back end and front end are on same servers where the request and response’s are resolved by the server and HTML page is sent in response.

In simple terms, the Back end handles both front end and back end, based on the user request, the server responds with the html pages. Here HTML pages are generated by the server and provided to end user with end results.

Example : Next JS where React and Node JS (Express micro services are in same app.)

What is Synthetic events ?

A cross browser wrapper around native events like onclick, onchange, onblur, etc.,

What are the phases of React Class components ?

1. Mounting
2. Rendering
3. Updating
4. Un mounting

Why are keys used in React or React Native ?

It allows for more efficient rendering of lists, so that React can reuse DOM elements without having to destroy + recreate them when lists change (slightly) in the UI.

React Native

What are hybrid apps ?

Hybrid apps are like any other apps installed on a device in webView of the native mobile apps.

What are native apps ?

native apps are build and developed and installed on device, they are very specific to platform Eg : IOS, Android.

When will you use ScrollView and Flatlist ?

Scrollview : used for scrolling of the web container.

Flatlist : used for scrolling array list.

What is the difference between HOT Reloading and LIVE reloading ?

HOT reloading : It will reload the app by presuming the state of the application.

Best for static sites developments

LIVE reloading : It will refresh the entirely by removing the state, so that the application has to run from starting.

Best for secured sites where tokens, authentication is required.

How to re render a Flat List ?

Flat list can be re rendered by passing extraData value.

How does Flexbox differ in mobile hybrid apps and browser ?

Flex box work pretty much same in both platforms with few differences.

The default value of ‘flexdirection’ is changed from column to row and flex property will only have single value.

What is the engine that react native uses ?

React native uses two engines for IOSand Android,

For Android , it uses chrome V8 engine through web sockets.

For IOS, it uses Javascript Core, the javascript engine that safari uses.

How to use Local storage in Hybrid App ?

AsyncStorage is used instead of local storage for hybrid apps, it is a general basic async await function with try and catch code slices.

setItem and getItem are used for setting and fetching the storage data.

What is the use of interaction manager ?

allows long-running work to be scheduled after any interactions/animations have completed. In particular, this allows JavaScript animations to run smoothly. Applications can schedule tasks to run after interactions with the following: InteractionManager.

How styling is done in React Native ?

React native exposes Stylesheet for styling the native components.

Redux

What is Redux ?

Redux is a predictable state container library used for data management of web apps.

The three components of Redux are Store, Actions and Reducer / Slices.

The three principles of Redux are

1. Single source of truth
2. Immutability of state i.e, State is read only
3. Returning from Pure Functions.

What is Flux ?

Flux is a State management library with multiple Stores where each page / component has to register to each store, when ever a store emits the change the view or page has to be updated. View can only request the change to store by Action Creator.

What are the principles of Redux ?

1. Single source of truth.
2. Immutability of data.
3. Changes are made in pure functions.

Explain the components of Redux ?

Redux is a predictable state container.

the components of Redux are :

1. Actions / Action Creators : Action creators simple javascript objects which carries data when dispatched from view to reducer. It has Type and a payload to be passed.
2. Reducer : Reducer is a Pure Function where it returns the value on the scope of the input values. The values are computed based on previous values or state and a new State is returned. Here mutation is not done to actual state, instead a new state is computed on previous state and returned. These reducers has to be registered in the store.
3. Store : it is a Simple Javascript Function or Object where it provides Data of application where ever it is necessary. Due to single store concept, it is easy to share data across the application.