Rules for States and prop

If parent renders then children's also renders in React, Parent of the parent will not be rendered.

Never change the value of the props - props are meant to be a snapshot of the component's configuration at a given point in time. By keeping them immutable, you ensure a more stable and maintainable React application.

In React, setState is asynchronous. This means that when you call setState, the state is not updated immediately.

  import React, { useState } from 'react';

  function Counter() {
    const [count, setCount] = useState(0);

    const handleClick = () => {
      setCount(count + 1);
      console.log(count); // prints 0, not 1
    };

    return (
      <div>
        <p>Count: {count}</p>
        <button onClick={handleClick}>Increment</button>
      </div>
    );
  }

handleClick is called, which updates the state using setCount. However, the console.log statement still prints the old value of count (0), not the new value (1). This is because setState is asynchronous, and the state is not updated yet when console.log is executed.

Don't Create Keys On the fly:

in above image when we are rendering the bands we use key as crypto.randomUUID

never do something like this because of performance issue with react. we are generally generating the keys when we are rendering the element it will impact the performance of the code.
By using crypto.randomUUID we are generating new keys all the time when we re-render or add another band object. React will append all the items again with this.
Why creating keys on the fly is a problem: When you create keys on the fly, you're essentially generating a new key every time the component is rendered. This can lead to:
1. Performance issues: React has to re-render the entire list every time the keys change, which can be slow and inefficient.
2. Unexpected behavior: If the keys change, React may not be able to correctly identify which components to update or remove, leading to unexpected behavior.

Lifting the state up:

In React, "lifting the state up" is a design pattern that involves moving the state from a child component to a parent component. This is done to make the state accessible to multiple child components, or to make it easier to manage the state from a single location.

// Before: Child component manages its own state
function Child() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

// After: Parent component manages the state
function Parent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <Child count={count} onIncrement={() => setCount(count + 1)} />
      <Child count={count} onIncrement={() => setCount(count + 1)} />
    </div>
  );
}

function Child(props) {
  return (
    <div>
      <p>Count: {props.count}</p>
      <button onClick={props.onIncrement}>Increment</button>
    </div>
  );
}

In this example, the Parent component manages the count state and passes it as a prop to the Child components. The Child components use the count prop and call the onIncrement callback to update the state.

How React Works:

In React, the diffing algorithm is used to determine what changes need to be made to the DOM when the state of a component changes. This algorithm is also known as the "Virtual DOM" or "Reconciliation" algorithm.

How it works

Here's a high-level overview of the diffing algorithm:

Create a Virtual DOM: When the state of a component changes, React creates a new Virtual DOM, which is a lightweight in-memory representation of the real DOM.
Diff the Virtual DOM with the previous Virtual DOM: React then compares the new Virtual DOM with the previous Virtual DOM to determine what changes need to be made.
Compute the differences: React computes the differences between the two Virtual DOMs, which includes additions, removals, and updates to elements.
Update the real DOM: React then updates the real DOM by applying the computed differences.