React developer

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.

Slice :
1) Doesn't modify the original array(immutable)
2) Returns the subset of original array
3) Used to pick the elements from array

Splice : 
1) Modifies the original array(mutable)
2) Returns the deleted elements as array
3) Used to insert or delete elements to/from array

In Javascript, functions are first class objects. First-class functions means when functions in that language are treated like any other variable.

For example, in such a language, a function can be passed as an argument to other functions, can be returned by another function and can be assigned as a value to a variable. For example, in the below example, handler functions assigned to a listener

const handler = () => console.log ('This is a click handler function');
document.addEventListener ('click', handler);

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.

Code : 

function binarySearch(arr,value,startPos,endPos){
if(startPos > endPos) return -1;

let middleIndex = Math.floor(startPos+endPos)/2;

if(arr[middleIndex] === value) return middleIndex;

elsif(arr[middleIndex > value]){
return binarySearch(arr,value,startPos,middleIndex-1);
}
else{
return binarySearch(arr,value,middleIndex+1,endPos);
}
}

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.

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.

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.

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 props in React are the inputs to a component of React. They can be single-valued or objects having a set of values that will be passed to components of React during creation by using a naming convention that almost looks similar to HTML-tag attributes. We can say that props are the data passed from a parent component into a child component.

The main purpose of props is to provide different component functionalities such as :

1) Passing custom data to the React component.
2) Using through this.props.reactProp inside render() method of the component.
3) Triggering state changes.


For example, consider we are creating an element with reactProp property as given below: 
This reactProp name will be considered as a property attached to the native props object of React which already exists on each component created with the help of React library: props.reactProp;.

Some of the advantages of using Redux are as follows:

1) Redux provides extremely easy state transfer between the components.

2) The states are always predictable in Redux and its maintenance is relatively easy.

3) Debugging and testing code in Redux is simple through logging behaviour and status.

4) Redux provides great performance. It might occur to us that keeping the application's state global would result in bad performance. However, usually, that is not the case as React Redux implements a lot of performance optimizations internally so that our own connected component only re-renders when it actually needs to.

5) Redux also offers state persistence by storing the application's state to local storage and restoring it after a refresh.

mapStateToProps() : 
1) The mapStateToProps() method is used to render the stored data to the component.
2) The entirety of the results of the mapStateToProps() method is a plain object which is later merged into the component’s prop.
3) This method's use is to connect the redux state to the props of the react component.


mapDispatchToProps() : 
1) The mapDispatchToProps() method is used to render the action creators with props to the component.
2) In the mapDispatchToProps() method, each action creator is wrapped in the dispatcher call so that they can be called upon directly and later merged into the component’s prop.
3) This method's use is to connect redux actions to the react props.

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.