Day 2 of react

What is hook and why we need hooks in react ?

Hooks

Imagine you're building a house with LEGO bricks. Each LEGO piece represents a part of your website or app. Before, if you wanted to add moving parts or special features to a LEGO house, you had to use big, complicated LEGO pieces (like classes in React). But now, with Hooks, you have smaller, simpler LEGO pieces that can do the same job (like functions).

Here's why Hooks are cool and why we need them:

1. Simplified Building: Hooks make it easier to build features into your website or app. You don't need to use those big, complicated LEGO pieces anymore. You can use smaller, simpler ones.

2. Reusing Pieces: With Hooks, you can reuse the same simple LEGO pieces in different parts of your house. This saves you time and makes your house easier to build and understand.

3. Keeping Things Tidy: Using Hooks makes your house neater and easier to understand. You can organize your LEGO pieces more neatly, making it easier for others (and yourself) to see how everything fits together.

4. Doing Special Things: Hooks allow your LEGO pieces to do special things, like changing color when you touch them or playing music when you press a button. This makes your website or app more interactive and fun.

5. Building Faster: Using Hooks can help you build your website or app faster because you spend less time figuring out how to use the big, complicated LEGO pieces and more time actually building cool stuff.

In simple words, Hooks are like magic LEGO pieces that make building websites or apps easier, faster, and more fun!

So we dont use hooks then we have a big problem to update the elements content. Like i have h1, h2 , a , buttons etc so we have to use differents document.get i think you understand what i want to say let see in a code ,

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {   

    let count = 0;

    function Add() {
        count = count + 1;
        document.getElementById('h1').innerHTML = "Counter is " + count;
        document.getElementById('btn1').innerHTML="Add value "+ count;
        document.getElementById('btn2').innerHTML="decrease value "+ count;
    }

    function decrease() {
        count = count - 1;
        document.getElementById('h1').innerHTML = "Counter is " + count;
        document.getElementById('btn1').innerHTML="Add value "+ count;
        document.getElementById('btn2').innerHTML="decrease value "+ count;
    }



  return (
    <>
      <h1 id='h1'>Counter is {count}</h1>
      <button id='btn1' onClick={Add}>Add value {count}</button>
      <button id='btn2' onClick={decrease}>decrease value {count}</button>
    </>
  )
}

 export default App

you can see if i want to update any element i need to do document.get which can hectic when i have to update on a very large number of elements so that’s why we need hooks.

This is with the help of react hooks we can change each place at same time in each element like buttons, h1 etc .

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {  

    const [count,setCount]=useState(0);  // here useState is hook 

    function Add(){ 
       setCount(count+1); 
    } 
    function decrease(){ 
      setCount(count-1); 
    }

  return (
    <>
      <h1>Counter is {count}</h1>
      <button onClick={Add}>Add value {count}</button>
      <button onClick={decrease}>decrease value {count}</button>
    </>
  )
}

export default App