React developer

1) A promise is an object that may produce a single value some time in the future: either a resolved value, or a
reason that it’s not resolved (e.g., a network error occurred).

2) A promise may be in one of 3 possible states: fulfilled, rejected, or pending. Promise users can attach callbacks to
handle the fulfilled value or the reason for rejection.

3) Promises are eager, meaning that a promise will start doing whatever task we give it as soon as the promise
constructor is invoked.


Working of Promises :

A promise is an object which can be returned synchronously from an asynchronous function. It will be in one of 3
possible states:

i) Fulfilled: onFulfilled() will be called (e.g., resolve() was called)
ii) Rejected: onRejected() will be called (e.g., reject() was called)
iii) Pending: not yet fulfilled or rejected

1) A promise is settled if it’s not pending (it has been resolved or rejected). Sometimes people use resolved and
settled to mean the same thing: not pending.

2) Once settled, a promise can not be resettled. Calling resolve() or reject() again will have no effect. The immutability
of a settled promise is an important feature.

3) Native JavaScript promises don’t expose promise states. Instead, you’re expected to treat the promise as a black
box.

4) Only the function responsible for creating the promise will have knowledge of the promise status, or access to
resolve or reject.


Important Promise Rules : Promises following the spec must follow a specific set of rules :

1) A promise or “thenable” is an object that supplies a standard-compliant .then() method.

2) A pending promise may transition into a fulfilled or rejected state.

3) A fulfilled or rejected promise is settled, and must not transition into any other state.

4) Once a promise is settled, it must have a value (which may be undefined). That value must not change.

5) Change in this context refers to identity (===) comparison. An object may be used as the fulfilled value, and object
properties may mutate.

A callback is a function that will be executed after another function gets executed.

In javascript, functions are treated as first-class citizens, they can be used as an argument of another function, can be
returned by another function and can be used as a property of an object.

Functions that are used as an argument to another function are called callback functions.


Example Code :

function divideByHalf(sum){
console.log(Math.floor(sum / 2));
}

function multiplyBy2(sum){
console.log(sum * 2);
}

function operationOnSum(num1,num2,operation){
var sum = num1 + num2;
operation(sum);
}
operationOnSum(3, 3, divideByHalf); // Outputs 3
operationOnSum(5, 5, multiplyBy2); // Outputs 20


Explanation :

In the code above, we are performing mathematical operations on the sum of two numbers.

The operationOnSum function takes 3 arguments, first number, second number, and the operation that is to be
performed on their sum (callback) .

Both divideByHalf and multiplyBy2 functions are used as callback functions in the code above.

These callback functions will be executed only after the function operationOnSum is executed.

Therefore, callback is a function that will be executed after another function gets executed.

Hoisting is a default behaviour of javascript where all the variable and function declarations are moved on top.
This means that irrespective of where the variables and functions are declared, they are moved on top of the scope.
The scope can be both local and global.


EXAMPLE 1 :

hoistedVariable = 10;
console.log(hoistedVariable); // outputs 10 even when the variable is declared after it is initialized
var hoistedVariable;


EXAMPLE 2 :

hoistedFunction(); // Outputs " Hello world! " even when the function is declared after calling
function hoistedFunction(){
console.log(" Hello world! ");
}


EXAMPLE 3 :

// Hoisting takes place in the local scope as well
function doSomething(){
x = 33;
console.log(x);
var x;
}

A closure is the combination of a function and the lexical environment within which that function was declared. i.e, It is
an inner function that has access to the outer or enclosing function’s variables. The closure has three scope chains

i) Own scope where variables defined between its curly brackets
ii) Outer function’s variables
iii) Global variables

Let's take an example of closure concept,

function Welcome(name){
var greetingInfo = function(message){
console.log(message+' '+name);
}
return greetingInfo;
}
var myFunction = Welcome('John');
myFunction('Welcome '); //Output: Welcome John
myFunction('Hello Mr.'); //output: Hello Mr.John


As per the above code, the inner function(i.e, greetingInfo) has access to the variables in the outer function scope(i.e,
Welcome) even after the outer function has returned.

Higher-order function is a function that accepts another function as an argument or returns a function as a return value or both.

EXAMPLE : 

const firstOrderFunc = () => console.log ('Hello, I am a First order function');
const higherOrder = ReturnFirstOrderFunc => ReturnFirstOrderFunc();
higherOrder(firstOrderFunc);

1) The sort() method allows us to sort elements of an array in place. Besides returning the sorted array, the sort()
method changes the positions of the elements in the original array.

2) By default, the sort() method sorts the array elements in ascending order with the smallest value first and largest
value last.

3) The sort() method casts elements to strings and compares the strings lexicographically to determine the orders.
To sort an array of integers in JS :


Code :

let numbers = [0, 1, 20, 3, 30, 2, 10];
numbers.sort((a, b) => a - b);

console.log(numbers); //[0,1,2,3,10,20,30]


The compare() function accepts two arguments a and b. The sort() method will sort elements based on the return
value of the compare() function with the following rules:

i) If compare(a,b) is less than zero, the sort() method sorts a to a lower index than b. In other words, a
will come first.

ii) If compare(a,b) is greater than zero, the sort() method sort b to a lower index than a, i.e., b will come
first.

iii) If compare(a,b) returns zero, the sort() method considers a equals b and leaves their positions
unchanged.

Approach 1 (Using Destructruring Assignment) : This method was specific only for JS and the interviewer was preety
impressed when I used it .

Destructuring assignment (a feature of ES2015) lets you extract items of an array into variables. It works with any
data type: numbers, strings, booleans, objects.

Code :

let a = 1;
let b = 2;
[a, b] = [b, a];
a; // => 2
b; // => 1

[a, b] = [b, a] is the destructuring assignment that swaps the variables a and b.


Approach 2 (Normal Method - Using a temporary variable - Not recommended in interviews though) :

Code :

let a = 1;
let b = 2;
let temp;
temp = a;
a = b;
b = temp;
a; // => 2
b; // => 1

temp is the temporary variable.
At the first step, temp is assigned with the value of a. Then a variable is assigned with the value of b. Finally, the
variable b is assigned with the value of temp (having the initial value of a).


Approach 3 (Without using temporary variable - Using Addition and Difference) :

Code :

let a = 1;
let b = 2;
a = a + b;
b = a - b;
a = a - b;
a; // => 2
b; // => 1

Initially, a is 1 and b is 2. Let's see how the 3 statements perform the swapping:

a = a + b assigns to a the value 1 + 2.
b = a - b assigns to b the value 1 + 2 - 2 = 1 (b is now 1).
a = a - b assigns to a the value 1 + 2 - 1 = 2 (a is now 2).
Finally, a is 2 and b is 1. The swapping of a and b has been performed.

Class Components : 

1) Class-based Components uses ES6 class syntax. It can make use of the lifecycle methods.
2) Class components extend from React.Component.
3) In here you have to use this keyword to access the props and functions that you declare inside the class components.


Functional Components : 

1) Functional Components are simpler comparing to class-based functions.
2) Functional Components mainly focuses on the UI of the application, not on the behavior.
3) To be more precise these are basically render function in the class component.
4) Functional Components can have state and mimic lifecycle events using React Hooks.

React needs to use algorithms to find out how to efficiently update the UI to match the most recent tree. The diffing algorithms is generating the minimum number of operations to transform one tree into another. However, the algorithms have a complexity in the order of O(n^3) where n is the number of elements in the tree.

In this case, for displaying 1000 elements would require in the order of one billion comparisons. This is far too expensive. Instead, React implements a heuristic O(n) algorithm based on two assumptions :

1) Two elements of different types will produce different trees.
2) The developer can hint at which child elements may be stable across different renders with a key prop.

Stateless Components : If the behaviour is independent of its state then it can be a stateless component. You can use either a function or a class for creating stateless components. But unless you need to use a lifecycle hook in your components, you should go for function components.

Stateful Components : If the behaviour of a component is dependent on the state of the component then it can be termed as stateful component. These stateful components are always class components and have a state that gets initialized in the constructor.

When a component's props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. This process is called reconciliation.

The only way to change the state is to emit an action, an object describing what happened. This ensures that neither the views nor the network callbacks will ever write directly to the state. Instead, they express an intent to transform the state. Because all changes are centralized and happen one by one in a strict order, there are no subtle race conditions to watch out for. As actions are just plain objects, they can be logged, serialized, stored, and later replayed for debugging or testing purposes.

The combineReducers helper function turns an object whose values are different reducing functions into a single reducing function you can pass to createStore . The resulting reducer calls every child reducer, and gathers their results into a single state object.

Relay is similar to Redux in that they both use a single store. The main difference is that relay only manages state originated from the server, and all access to the state is used via GraphQL queries (for reading data) and mutations (for changing data). Relay caches the data for you and optimizes data fetching for you, by fetching only changed data and nothing more.

Every Redux application has multiple top-level directories as given below:

1) Components: Components are used for “dumb” React components unfamiliar with Redux.

2) Containers: Containers are used for “smart” React components that are connected to Redux.

3) Actions: Actions are used for all the action creators, where the file name should be corresponding to the part of the app.

4) Reducers: Reducers are used for all the reducers where the file name is corresponding to the state key.

5) Store: Stores are used for store initialization. This directory works best in small and mid-level size apps.

General Tip : Before an interview for any company , have a breif insight about the company , what it does , when was
it founded and so on . All these info can be easily acquired from the Company Website itself .

Tip 1 : The cross questioning can go intense some time, think before you speak.

Tip 2 : Be open minded and answer whatever you are thinking, in these rounds I feel it is important to have opinion.

Tip 3 : Context of questions can be switched, pay attention to the details. It is okay to ask questions in these round,
like what are the projects currently the company is investing, which team you are mentoring. How all is the work
environment etc.

Tip 4 : Since everybody in the interview panel is from tech background, here too you can expect some technical
questions. No coding in most of the cases but some discussions over the design can surely happen.