React Hooks Methods

What is React Hooks?

A Hook is a special function. It is a new feature of React. Hooks are introduced in React 16.8. React Hooks are used in functional components to maintaining state and other React features without writing a class.

The following hooks are used in functional components to maintain the state.

1. useState:-

import React, { useState } from 'react';
function Example() {
  // Declare a new state variable, which we'll call "count"  const
  [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Next
      </button>
    </div>);
}

What does calling do useState?

This is a way to store some values between the function calls — useState is a new way to use the same capabilities that this.state provides in a class. It declares a “state variable”.Normally, variables “disappear” when the function exits but state variables are preserved by React.

What do we pass to useState as an argument?

The only argument to the useState() hook is the initial state. In the above example, we just want a number for how many times the user clicked, so pass 0 as the initial state for our variable.

What does useState return?

It returns a pair of values: the current state and a function that updates it. This is why we write const [count, setCount] = useState(). This is similar to this.state.count and this.setState in a class, except you get them in a pair.

2.useEffect:-

Hooks provide the useEffect() API. The call accepts a function as an argument. The function runs when the component is first rendered, and on every subsequent re-render/update. React first updates the DOM, then calls any function passed to useEffect(). All without blocking the UI rendering even on blocking code, unlike the old componentDidMount and componentDidUpdate, which makes our apps feel faster.

const { useEffect, useState } = React
const CounterWithNameAndSideEffect = () => {
  const [count, setCount] = useState(0)
  const [name, setName] = useState('Flavio')
  useEffect(() => {
    console.log(`Hi ${name} you clicked ${count} times`)
  })
  return (
    <div>
      <p>
        Hi {name} you clicked {count} times
      </p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
      <button onClick={() => setName(name === 'Flavio' ? 'Roger' : 'Flavio')}>
        Change name
      </button>
    </div>
  )
}

3.useCallback():-

In React, useCallback() hook is another important hook which is used for performance optimization. When we implement or call any component, all components re-render every time any call is made.

For a small application, it will not have much effect. But when dealing with a large application, it will give performance issues. So, useCallback() provides a way to render components only when required.

4.useReducer():-

This hook is used for state management. This stands as an alternative for useState() hook. This is a hook that includes in React 16.7.0. It accepts a reducer function along with the initial application state and returns the current application state.

Syntax-useReducer(reducer,initialState)

5.useContext():-

This hook is used to pass data from one component to another without being specified to each of the component trees.

In React, suppose we have a parent component having 3 levels of child components,

Like the above image, if we want to pass any data from parent component to child component C, so as per React we need to pass props to each level to be available to Child component c. This solution may be feasible when there are several child components. So, React hooks provides a concept call Context. React Context API allows you to easily access data at different levels of the component tree, without passing prop to every level.

Note:-For the more information about react hook go to react official website:-https://reactjs.org/docs/hooks-intro.html