Hook in React tut 9

      # Hook in React

Hooks are the new feature introduced in the React 16.8 version. It allows you to use state and other React features without writing a class. Hooks are the functions which "hook into" React state and lifecycle features from function components. It does not work inside classes.

Hooks are backward-compatible, which means it does not contain any breaking changes. Also, it does not replace your knowledge of React concepts.

When to use a Hooks

If you write a function component, and then you want to add some state to it, previously you do this by converting it to a class. But, now you can do it by using a Hook inside the existing function component

Rules of Hooks

Hooks are similar to JavaScript functions, but you need to follow these two rules when using them. Hooks rule ensures that all the stateful logic in a component is visible in its source code. These rules are:

1. Only call Hooks at the top level

Do not call Hooks inside loops, conditions, or nested functions. Hooks should always be used at the top level of the React functions. This rule ensures that Hooks are called in the same order each time a components renders.

2. Only call Hooks from React functions

You cannot call Hooks from regular JavaScript functions. Instead, you can call Hooks from React function components. Hooks can also be called from custom Hooks.

Pre-requisites for React Hooks

1. Node version 6 or above
2. NPM version 5.2 or above
3. Create-react-app tool for running the React App

Practical of Hooks :

code:

filename: HookUse.jsx

import React, { useState } from 'react';

let IncNum = () => {

    let [count,statecount] = useState(0);

    let INum = () =>

    {

        statecount(count + 1);

    }

    return(

     <>

      <div className="container">

      <h1 style={{padding:'30px'}}>{count}</h1>

      <button className="btn" onClick={INum}> Click </button>

      </div>  

    </>

    ) 

};

export default IncNum;

filname : ShowCurTime.jsx

import React,{useState} from 'react';

//  show currentTime using HOOK

let ShowCurTime = () => {

    let curTime = new Date().toLocaleTimeString();

    let [Time,updateTime] = useState(curTime); // Array Distructuring use here

    let getCurTime = () =>

    {

        updateTime(new Date().toLocaleTimeString());

    }

    setInterval(getCurTime,1000)

   return(

      <>

     <div className="container">

     <h1 style={{padding:'30px'}}>{Time}</h1>

     <button className="btn" onClick={getCurTime}> Click </button>

     </div>  

   </>

   )

}

export default ShowCurTime;

filname : DigitalClock.jsx

import React, { useState } from 'react';

let Clock = () => {

//    let Time = new Date().toLocaleTimeString();

//    let [cTime,getCurTime] = useState(Time);             

//    let curTime = () =>

//    {

//        getCurTime(new Date().toLocaleTimeString());

//    }

  

//     setInterval(curTime,1000);

let [cTime,getCurTime] = useState(new Date().toLocaleTimeString())

 setInterval(()=>{getCurTime(new Date().toLocaleTimeString())},1000);  // In ONe Line 

 var name = "vrushant"

     let [curname,ChangeName]=useState(name)

     let chgName = () =>

     {

         name="vedant"

         ChangeName(name);

         console.log(name);

     } 

    return (

        <>

            <div className="container">

                <h1 style={{fontSize:'5rem' ,textShadow: '2px 4px 10px rgb(251, 255,

0)'}}> Digital Clock</h1>

                <h1 style={{fontSize:'3rem' , padding: '5rem'}}>{cTime}</h1>

                <h5>i am {curname} , my full name is {curname} domde . my name

 is very hard to talk which is {curname}. </h5>

                

                <button onClick={chgName}>Change Name</button>              

            </div>

        </>

    )

}

export default Clock;