React For Angular Developers!

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:

  1. JavaScript Execution: when an event like oninput triggers, JavaScript modifies the DOM (e.g., updating an <input> field's value).
  2. Style Calculation: If styles depend on the modified element, they might need recalculating for related elements.
  3. 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).
  4. 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:
  1. JavaScript Execution: Just like before, the input triggers an event (onChange in React).
  2. React Updates the Virtual DOM: Instead of updating the real DOM directly, React modifies a lightweight JavaScript object (Virtual DOM). Real DOM is unchanged for now.
  3. Diffing Algorithm (Reconciliation): React compares the new Virtual DOM with the previous version, and finds the minimal set of changes.
  4. Batch Update & Patch the Real DOM Efficiently: React groups updates together and applies only the necessary changes to the real DOM. This minimizes layout recalculations and repaints.

Advantages of React's Approach:

  • Fewer reflows & repaints, since only the necessary elements get updated.
  • Better performance for complex applications with frequent UI updates.
  • Batching reduces expensive DOM updates.

TLDR

Browser DOM updates are expensive because they trigger reflows (layout recalculations) and repaints when changes occur.

Problem: Directly modifying the DOM causes unnecessary updates, slowing performance.
React’s Solution: Uses a Virtual DOM to track changes, applies only the minimal updates, and batches updates to reduce reflows and repaints.

Benefits:

  • Fewer reflows & repaints: Faster UI updates.
  • Efficient diffing algorithm: Only necessary elements update.
  • Better performance in complex apps with frequent UI changes.

Creating a React app:

To create a React App:
npx create-react-app my-react-app
cd my-react-app
npm start

But this crates JS files, not TS

2 ways to  create TS based react app
  1. Use vite: npm create vite@latest my-app -- --template react-ts
    • cd my-app
    • npm install
    • npm run dev
  2. Regular: npx create-react-app my-app --template typescript
    • cd my-app
    • npm start

Flow:

JSX:
Helps you to write HTML elements inside JavaScript

In this blog, I will go forward with the vite- react app.

Showing Lists:
export const ListComponent = () => {
    const data = ["apple", "orange", "grape"];
    const items = Array.from(data).map(ele => {
        return <p>{ele}</p>
    })
    return <>{items}</>
}

PROPS
Just like how we have @Input() in angular, we have "props" in react
If the same list was being sent as an input:
 <ListComponent data={['apple','orange','grape']} />

export const ListComponent = (props: { data: Array<string> }) => {
    const data = props.data;
    const items = Array.from(data).map((ele, index) => {
        return <p key={index}>{ele}</p>
    })
    return <>{items}</>
}

ONCLICK
export const ListComponent = () => {
    const getItems = () => {
       alert("Hey")
    }
    return <>
                <button onClick={getItems}> Get items </button>
           </>
}
(click) = onClick
getItems() = {getItems}

Project 1: Show list on click of a button. List to come from parent.


Comments

Post a Comment

Popular posts from this blog

Inside the JavaScript Memory Box: Visualizing Variables, References, and Copies

Image
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...
Read more

React & State Management: All Concepts

Section 1: Fundamentals 1. Counter with increment, decrement, reset — useState Remember: prev is needed when the new state depends on the old state. When you're setting a hardcoded value like 0, you just pass 0 directly. Why:  reason prev matters — if multiple state updates happen in the same render cycle, React batches them. Using prev guarantees you're working off the latest state, not a stale snapshot. 2. Toggle show/hide paragraph — useState Remember: onClick={toggle} — pass the function reference, not the call. onClick={() => toggle()} — also fine, arrow function that calls toggle when clicked. onClick={toggle()} — calls toggle immediately during render, setVisible triggers re-render, toggle calls again, infinite loop. Why: JSX evaluates expressions inside {} during render. toggle() is an expression that executes immediately. React doesn't get a chance to attach it as a handler — it just runs it right there, state updates, component re-renders, runs again. ...
Read more

React: Communication between components

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