Effect-hooks

 

Effect-hooks

We have already used state hooks that were introduced along with React version 16.8.0, which provide state to React components defined as functions - the so-called functional components. Version 16.8.0 also introduces the effect hooks as a new feature. As per the official docs:

The Effect Hook lets you perform side effects in function components. Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects.

As such, effect hooks are precisely the right tool to use when fetching data from a server.

useful packages for JavaScript developers.

All the packages are installed with the help of a package manager npm and yarn are most popular.

1. json server

2. dotenv

3. axios

5. webpack

6. redux

Axios and promises

react counter app

App.js

=>

import react,{useState} from 'react'

const App = () =>{

  const [counter, setCounter]=useState(0);

  const handleClick = (key) =>{

    if(key==="increase"){

      setCounter(counter+1)

    }else if(key==="set0"){

      setCounter(0)

    }else if(key==="decrease"){

      counter>0?setCounter(counter-1):setCounter(0)

    }

  }

  return (

    <div className="app">

      <h2>{counter}</h2>

      <div>

        <button onClick={()=>handleClick("increase")}>Increase</button>

        <button onClick={()=>handleClick("set0")}>Set 0</button>

        <button onClick={()=>handleClick('decrease')}>Decrease</button>        

      </div>

    </div>

  )

}

export default App

Index.css

=>*{

  margin: 0;

}

.app{

display: grid;

justify-items: center;

margin-top: 50px;

}

.app > h2{

  font-weight: 600;

  font-size: 35px;

  margin-bottom: 50px;

}

.app > div>button:nth-child(even){

  background-color:red;

  padding: 15px;

  width: 150px;

  margin: 15px;

  color: white;

  font-weight: 600;

}

.app > div>button:nth-child(odd){

  background-color:red;

  padding: 15px;

  width: 150px;

  margin: 15px;

  color: white;

  font-weight: 600;

}