JavaScript Unscripted

Without Redux Increment, Decrement, Reset  Same state, modified by multiple components With Redux: Components dispatch actions → reducers update state → components re-render Centralizing this using Redux and Redux Toolkit npm install @reduxjs/toolkit react-redux 1. Install Redux Toolkit and React Redux. 2. Create a "store" using "configureStore". 3. Store holds all global application state. 4. Create "slice files" for each feature (user, counter, etc.). 5. Each slice contains initial state and reducers. 6. Redux Toolkit auto-generates actions from reducers. 7. Combine slice reducers inside the store. 8. Wrap `<App />` with `<Provider store={store}>`. 9. Use `useSelector` to read state in components. 10. Use `dispatch(action)` to update state. Multiple "Slices" Final Summary: Redux Toolkit is the modern, recommended way to use Redux The store holds all global state Slices organize state by feature useSelector reads state dispatch updat...

Problem: Let's say we have a "👍🏼" button. When the user clicks on it, API call is made to save the value in the backend A message "Liked" is displayed if the save was successful But if the API call takes 5 seconds for the response, the UI looks laggy. Solution: useOptimistic hook: "Give me a temporary override of baseState while a transition is pending." Note: It does NOT store an independent state. It derives its value from the “base” (real) state. Rules: useOptimistic requires that there is some state that goes to ‘pending’ immediately after setting optimistic value There are several ways to make the component go to ‘pending’ like using startTransition When the pending transition stops, React stops using the optimistic value and re-renders using the real state value that your code updated. Lifecycle 👍🏼clicked -> transition starts -> optimistic value used -> component in "pending" state -> API returns (component is no more in...

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

The Problem: The one big problem all the frameworks are trying to solve: The browser's real DOM operations are expensive because they trigger reflows (layout recalculations) and repaints. When a user types in an input field, the browser processes updates in four main stages : JavaScript Execution: when an event like oninput triggers, JavaScript modifies the DOM (e.g., updating an <input> field's value). Style Calculation:  If styles depend on the modified element, they might need recalculating for related elements. Layout (Reflow):   If the change affects an element’s size or position, the browser recalculates the layout of affected elements (e.g., increasing a <div> size). Painting & Compositing:  If elements were moved, resized, or changed visually, the browser re-renders them. How React’s Virtual DOM Optimizes This Instead of immediately modifying the real DOM, React follows an optimized approach : JavaScript Execution: Just like before, the input ...