React Hooks Simplified

What are hooks in React.js ?

React hooks allows to use state and other react features without writing a class. They are functions that hook in the react state and lifecycle from function components.

Previously before hooks were introduced, state were managed inside classes component. But, now manage state using a Hook inside the existing function using hooks API.

useState()

Its a hooks API that return a stateful value. we call it inside a function component to add some local state to it. During the initial rendering, the value of state is the initialState passed as argument to useState function.

You can use State Hook more that once in single component.

Syntax
const [state, setState] = useState(initialState);

Example
const[name, setName] = useState('nick');
const[age, setAge] = useState(30);

The setState is function used to update the state. It accepts a new value and re-render's the component. React components automatically re-render whenever there is a change in their state.

let's code a simple example on how to use React Hook.

Import the react and useState hooks from react library

import React, {useState} from 'react'

Create a functional component named counter.

function Counter(){
    return(
        <div>
            <h3>Hello Counter</h3>
        </div>
    )
}

export default Counter;

let's use the knowledge of useState we learnt above to add state to the component. Initial state value is 0.

function Counter(){

    //Initial state value is zero
    const[counter, setCounter] = useState(0)

    return(
        <div>
            <h3>Hello Counter</h3>
        </div>
    )
}

export default Counter;

Add buttons with onClick handlers for increment and decrement.

function Counter(props) {

    //Initial state value is zero
  const [counter, setCounter] = useState(0);
  return (
    <div>
      <div>
        <button onClick={handleDecrement}>-</button>
        <h5>Count is {counter}</h5>
        <button onClick={handleIncrement}>+</button>
      </div>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  )
}

export default Counter;

Now Create onClick event handler functionality to execution a function when a button is clicked.

const DecrementHandle = () => {
    setCount(prevCount => prevCount -1 1);
  };

 const IncrementHandle= () => {
    setCount(prevCount => prevCount + 1);
  };

Putting all the code together

```jsx
import React, { useState } from "react";

function Counter() {
  // Set the initial count state to zero, 0
  const [counter, setCounter] = useState(0);

  // Create handleIncrement event handler
  const handleIncrement = () => {
    setCount(prevCount => prevCount + 1);
  };

  //Create handleDecrement event handler
  const handleDecrement = () => {
    setCount(prevCount => prevCount - 1);
  };
  return (
    <div>
      <div>
        <button onClick={handleDecrement}>-</button>
        <h5>Count is {count}</h5>
        <button onClick={handleIncrement}>+</button>
      </div>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
}

export default Counter;

Thank you for reading. I hope it was helpful.

Kamal Patel