JavaScript Unscripted

GITHUB Concurrent rendering is a way of scheduling rendering work . The developer tells React which updates are more important and which are less important. Since React runs on JavaScript, there is only one main thread. Imagine a kid building a Lego city. While building it, his sister falls down. He pauses building the Lego city (lower priority), helps his sister (higher priority), and then resumes building the city. React example Consider two state updates State update for the text typed in the input box State update for the computed results based on the input For a smooth user experience: The text the user types must appear immediately The computed results can appear with a slight delay So we tell React: Treat updates that affect the input value as high priority Treat updates that render derived or expensive results as low priority If React is busy rendering less important work and a high-priority update arrives, React can pause or abandon the low-priority rendering, update the input...

The standard library used:  react-router-dom BASIC ROUTING 4 things needed A routing configuration A place to load the routes output <Outlet /> An initial element where all this can go <App /> A navbar main.jsx -> routes -> App -> Navbar + Outlet       Step 1: Routes.jsx import { Routes, Route } from "react-router-dom"; import App from "./App"; export default function GlobalRoutes() { return ( <Routes>   <Route path="/" element={<App />}>      <Route index path="/" element= { <Home/> } />      <Route path="/products" element= { <Products /> } />      <Route path="/profile" element= { <Profile /> } />      <Route path="*" element= { <Home/> } />    </Route>  </Routes> ) } Step 2: main.jsx import { BrowserRouter } from 'react-router-dom'createRoot(document.getElementById('root')).render( ...

Parent to Child: Props Child to Parent Callback Props (advanced props) Controlled Components useImperative hook  Nested Tree: useContext Sibling: Lift State Up PARENT TO CHILD: Props App.jsx Users.jsx <User name ={user} /> function User({ name }) {  return <h1> {name} </h1> } CHILD TO PARENT a) Callback Props (Advanced Props) Parent.jsx Child1.jsx export function Parent() {   function sayHello () {     alert(“hello triggered”)   }   <Child1 onSayHello ={ sayHello } /> } function Child1({ onSayHello }) {   return <button onClick={ onSayhello() }>          Click       </button> } b) Controlled Components Usually used in forms. Controlled components mean the parent owns the state, the child renders inputs, and every ch...

There is a difference in the way JavaScript refences variables based on whether they are primitive or non-primitive Primitive Types: string, number, bigint, Boolean, symbol, null, undefined Non-Primitive: Arrays, Objects Each variable in JS is stored in a memory “box” Assignments: But when another variable tries to assign this value, JS thinks “wait, is this a primitive or non-primitive? Because if it is primitive, I will create a new box for this new variable with the same content. But if it’s not, I will just create a refence to the existing box” PRIMITIVE: Analogy: Let's say you have a note that says 5. You give a copy of this note to your friend.  Friend now updates this copy to 10. But your copy still says 5 let a = 5; let b = a; b = 10; //a remains unchanged NON-PRIMITIVE: Analogy: Let's say you have a note with address "123 Elm Street". In that house lives a cat named "Tom". You give a copy of this note to your friend. Friend now goes t...

useEffect()  1. When the value of a variable is already derived from an existing state. 💡: React anyway renders the component again with the latest state value. No need to again watch for changes in useEffect() Use case: Call an API when the count value changes export default function UseEffectDemo () {     const [ count , setCount ] = useState ( 0 );     const handleClick = () => {         setCount ( count + 1 )     }     const callAPI = () => {         return `/api/data/ ${ count } ` <--- NO need to do useEffect(() => {}, [count])     }     return (         <>             { count }             < button onClick = { handleClick } > increment </ button >             < p > Calling API { callAPI () } </ p > <--- Calling ...

 For the project setup refer:   app Let's say i have shell and remote right now With Module federation installed And Also angular.json updated  shellserv.service.ts import { Injectable } from '@angular/core' ; @Injectable ({ providedIn : 'root' // Ensure the service is available globally }) export class ShellService { constructor () { } sayHello () { return "hello from Shell!!" } } Make sure this works in shell app first import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core' ; import { provideRouter } from '@angular/router' ; import { routes } from './app.routes' ; import {ShellService} from './shellserv.service' ; export const appConfig : ApplicationConfig = { providers : [ provideZoneChangeDetection ({ eventCoalescing : true }), provideRouter ( routes ), ShellService] }; import { Component } from '@angular/core' ; import { RouterOutlet } from '@angular/router' ; impo...