week6.1 memo, card-wrapper

 

 //create a code which random numbers

 //rerandring Ugly Way*

//This will reRendering  whole body which is not necacery

import { useState } from 'react'
import './App.css'

function App() {
  const [count, setCount] = useState(0)
  const [title, setTitle] = useState("dhrup")

  const updateTitle = () => {
    setTitle("my title is " + Math.random()*100);
  }

  return (
    <>
      <button onClick={updateTitle}>Update the title</button>
      <Header title={title}></Header>
      <Header title="hark2">my name is dhurp</Header>

    </>
  )

}
  function Header({title}) {
    return <div>
      {title}
    </div>
    }

export default App

 

 //reRendering Cleaner Way*
//this method only re rendering those part which part it necessary to re rendering
 
import { useState } from 'react'
import './App.css'

function App() {
return (
    <div>
      <HeaderWithButton />
      <Header title="hark2">my name is dhurp</Header>
      <Header title="hark4">my name is dhurp</Header>
      <Header title="hark3">my name is dhurp</Header>
    </div>
  );
}

const HeaderWithButton = () => {
  const [title, setTitle] = useState("dhrup");

  const UpdateTitle = () => {
    setTitle("my title is " + Math.random()*100);
  };

  return (
    <div>
      <button onClick={UpdateTitle}>Update the title</button>
      <Header title={title}></Header>
    </div>
  );
};

function Header({ title }) {
  return <div>{title}</div>
}

export default App

 

 

 

 //introduction of memo*

 

 import { useState } from "react"
import { memo } from 'react';

function App() {
  const [firstTitle, setFirstTitle] = useState("my name is harkirat");

  function changeTitle() {
    setFirstTitle("My name is " + Math.random())
  }

  return (
    <div>
      <button onClick={changeTitle}>Click me to change the title</button>
      <Header title={firstTitle} />
      <br />
      <Header title="My name is raman" />
      <Header title="My name is raman" />
      <Header title="My name is raman" />
      <Header title="My name is raman" />
    </div>
  )
}

const Header = memo(function ({title}) {
  return <div>
    {title}
  </div>
})

export default App

 

 

 

// lets create a simple todo app that renders 3 todos
// Create a "Todo" component that accepts title, description as input
// initialize a state array that has 3 tod's
//Iterate over the array to render all the TODOs
//A button in this top level App Component to add a new TODO

 

//Todo app task *

import { useState } from 'react'
import './App.css'

let counter = 4;
function App() {
  const [todos, setTodos] = useState([
    {
      id: 1,
      title: "ready for sex",
      description: "do some sex"
    },
    {
      id: 2,
      title: "want sex",
      description: "learn new things"
    },
    {
      id: 3,
      title: "do some sex",
      description: "eat bro"
    }]);

  const addTodo = () => {
    // setTodos([...todos, {
    //   id: counter++,
    //   title: Math.random(),
    //   description: Math.random()
    // }])
    const newTodos = [];
    for (let i = 0; i < todos.length; i++) {
      newTodos.push(todos[i]);
    }
    //newTodos == todos
    newTodos.push({
      id: counter++,
      title: Math.random(),
      description: Math.random()
    })
    // existing ones +1
    setTodos(newTodos)
  }

  return (
    <div>
      <button onClick={addTodo}>Add a Todo </button>
      {todos.map(todo => <Todo key={todo.id} title={todo.title} description={todo.description} />)}
    </div>
  )
}

const Todo = ({ title, description }) => {
  return <div>
    <h1>
      {title}
    </h1>
    <h5>
      {description}
    </h5>
  </div>
}


export default App

 //Making card wrapper ugly way*

//create a div which has a border (hint: the way to create a border is border: 2px solid black)
//and inside the div, renders the prop



// import { useState } from 'react'
import './App.css'

const App = () => {
  return  <div>
    <CardWrapper innerComponent={<TextComponent/>}/>
  </div>
}

const CardWrapper = ({innerComponent}) => {
  return <div style={{border: "2px solid black"}}>{innerComponent}</div>
}

const TextComponent = () => {
  return <div>
    hi there
  </div>
}

export default App

//cleaner way*

 const App = () => {
  return <div>
    <CardWrapper>
      hi there
    </CardWrapper>
  </div>
}

const CardWrapper = ({ children }) => {
  return <div style={{ border: "2px solid black", padding: 20 }}>
    {children}
    </div>
}

export default App

 

 

 Hooks
 Until now we're discussed useState

these functions that start with use are called hooks

Hooks in React are functions that allow you to " hook into" React state and lifecycle features from function components.

 

 e.g. useEffect,
useMemo,
useCallback,
useRef,
useReducer,
useContext,
useLayoutEffect