React profiler API

“Profiler API” Its purpose is to help identify the part of an application that are slow so that we can check your component performance
So maybe benefit for optimizations

render(
  <App>
    <Profiler id="Panel" onRender={callback}>
      <Panel {...props}>
        <Profiler id="Content" onRender={callback}>
          <Content {...props} />
        </Profiler>
        <Profiler id="PreviewPane" onRender={callback}>
          <PreviewPane {...props} />
        </Profiler>
      </Panel>
    </Profiler>
  </App>
);
function onRenderCallback(
  id, // the "id" prop of the Profiler tree that has just committed
  phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered)
  actualDuration, // time spent rendering the committed update
  baseDuration, // estimated time to render the entire subtree without memoization
  startTime, // when React began rendering this update
  commitTime, // when React committed this update
  interactions // the Set of interactions belonging to this update
) {
  // Aggregate or log render timings...
}

Differences between redux, react-redux, redux-thunk?

redux: main library (independent from React)
redux-thunk: a redux middleware that helps you with async actions
react-redux: connects your redux store with ReactComponents

react-redux – bindings between redux and react. The library offers a set of react hooks – useSelector(), and useStore() to get the data from the store, and useDispatch() to dispatch actions. You can also use the connect() function to create HoCs (higher-order components), that listen to the store’s state changes, prepare the props for the wrapped component, and re-render the wrapped components when the state changes.

redux-thunk – middleware that allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action or to dispatch only if a certain condition is met. Used mainly for async calls to API, that dispatch another action on success/failure.

Angular Change Detection

Change Detection means updating the DOM whenever data is changed. Angular provides two strategies for Change Detection.

Change Detection: The process of updating the view (DOM) when the data has changed

Event loop in javascript?

What is event loop in JavaScript
The event loop is the secret behind JavaScript’s asynchronous programming.

The call stack is responsible for keeping track of all the operations in line to be executed. Whenever a function is finished, it is popped from the stack.

Event loop => Call Stack => webApi => Event Queue
webApi delay sum()

Angular ng-template, ng-container , ngTemplateOutlet

1- <ng-template> is a template element that Angular uses with structural directives like *ngIf, *ngFor, [ngSwitch] and custom directives
Note: the ng-template directive represents an Angular template

2- <ng-container> We can avoid having to create that extra div, we can instead use ng-container directive

<ng-container *ngFor="let item of items">
   <p *ngIf="item.id">{{item.name}}</p>
</ng-container>

3- *ngTemplateOutlet
We can used as a container to templates that can be reused at multiple places.

Prototype methods, objects without proto

The __proto__ is considered outdated and somewhat deprecated (in browser-only part of the JavaScript standard).
The modern methods are:

Object.create(proto, descriptors) – creates an empty object
Object.getPrototypeOf(obj) – returns the Prototype of obj.
Object.setPrototypeOf(obj, proto) – sets the Prototype of obj to proto.

let animal = {
  eats: true
};

// create a new object with animal as a prototype
let rabbit = Object.create(animal);

alert(rabbit.eats); // true

alert(Object.getPrototypeOf(rabbit) === animal); // true

Object.setPrototypeOf(rabbit, {}); // change the prototype of rabbit to {}
function Rabbit(name) {
  this.name = name;
}
Rabbit.prototype.sayHi = function() {
  alert(this.name);
};

let rabbit = new Rabbit("Rabbit")

rabbit.sayHi(); // "Rabbit"
Rabbit.prototype.sayHi(); //undefined
Object.getPrototypeOf(rabbit).sayHi(); //undefined
rabbit.__proto__.sayHi(); //undefined

Javascript prototype

In JavaScript, objects have a special hidden property Prototype , that is either null or references another object. That object is called “a prototype”:
The property Prototype is internal and hidden, but there are many ways to set it.

let animal = {
  eats: true
};
let cat= {
  jumps: true
};

cat.__proto__ = animal;  // Here sets animal to be a prototype of cat
alert( cat.eats ); // true (**)
alert( cat.jumps ); // true
let animal = {
  eats: true,
  walk() {
    alert("Animal walk");
  }
};

let rabbit = {
  jumps: true,
  __proto__: animal
};

// walk is taken from the prototype
rabbit.walk(); // Animal walk

……………………………………………………………………………………………………………

The prototype chain

let animal = {
  eats: true,
  walk() {
    alert("Animal walk");
  }
};

let rabbit = {
  jumps: true,
  __proto__: animal
};

let longEar = {
  earLength: 10,
  __proto__: rabbit
};

// walk is taken from the prototype chain
longEar.walk(); // Animal walk
alert(longEar.jumps); // true (from rabbit)
let animal = {
  jumps: null
};
let rabbit = {
  __proto__: animal,
  jumps: true
};

alert( rabbit.jumps ); // ? (1)

delete rabbit.jumps;

alert( rabbit.jumps ); // ? (2)

delete animal.jumps;

alert( rabbit.jumps ); // ? (3)

Angular Routing: router outlet

<router-outlet></router-outlet>
Where we want to output to display for a route, we can configure using router outlet
by default, angular has one router outlet in app.html

Route Information’s
1-Routing Strategy
2-Base href
3-Router module
4-Router outlet
5-Configuring Router
6-Parameterized Routes
7-Router link
8-Redirecting Routes
9-Wildcard Routes
10-Query params in Routes
11-Child Routes
12-Route Guards