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...