What do you mean by React Hooks? | React Hooks | React Tutorials

React Hooks | React Tutorials

Hooks

Hooks solve a most variety of seemingly unconnected problems in React. Hooks are recently introduced in React 16.8. It gives API to the React Principles like state, props, refs, etc. It allows us to utilize the react features without the help of the class. It does not replace the concept of the class instead gives a more direct API to React concepts. And also offers a new powerful offer to combine them. It does not contain any breaking changes, So it is 100% backward-compatible. It allows us to reuse stateful logic without changing your component hierarchy. 

When we need Hooks

When we need to develop a function component, and after that, if we need to include any state to it, before Hooks we do that by transforming it into a class. But, now we can do that by utilizing the Hook in the present function component. 

Rules of Hooks

Hooks are the same as the functions of Javascript, yet we are required to obey the following rules while using hooks. Using regulations of hooks, we can assure that complete stateful logic inside the component is apparent in the source code. The rules are:

1. Invoking Hooks at Higher Level
We should not invoke Hooks from Nested Functions, Conditions, Loops. We can invoke hooks using the high level of our react functions. By this rule, So you can invoke the hooks in a similar order every time a component produces.

2. Invoking Hooks through React Functions
According to standard javascript methods or functions, you cannot invoke hooks. Instead, you can invoke hooks through components of react functions. you can also call hooks through custom hooks.

Hooks State
This is a new approach to defining the state in the React Application. Using “useState()” function, It set and fetches the state. In the below-given following example, you can learn more about Hook State.

import React, { useState } from 'react';  
  
function CountApp() {  
  // 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)}>  
        Click me  
      </button>  
    </div>  
  );  
}  
export default CountApp;  

In the above-shown example, The Hook useState  which needs to call inside a function component to add some local state to it. This Hook useState returns a pair where the first element is the current state value/initial value, and the second one is a function which allows us to update that. After this, we call this function from an event handler or somewhere else.

Hooks Effects
The Hooks Effect enables to conduct of collateral effects within the components function. And Hooks Effect will not use the lifecycle methods of the components, and these methods exist in the class components. Hooks Effect is similar to componentDidUpdate(), componentDidMount() lifecycle methods.

import React, { useState, useEffect } from 'react';  
  
function CounterExample() {  
  const [count, setCount] = useState(0);  
  
  // Similar to componentDidMount and componentDidUpdate:  
  useEffect(() => {  
    // Update the document title using the browser API  
    document.title = `You clicked ${count} times`;  
  });  
  
  return (  
    <div>  
      <p>You clicked {count} times</p>  
      <button onClick={() => setCount(count + 1)}>  
        Click me  
      </button>  
    </div>  
  );  
}  
export default CounterExample;  

Side Effects of Hooks

we categorize side effects into two types:

1. Effects with Cleanup
Above, we learnt how to express side effects that don’t require any cleanup. But, some effects do. Let suppose, you might want to set up a subscription to some external data source. In that case, So it is important to clean up so that we don’t introduce a memory leak!  After updating the DOM, you have to clean up some effects. For example, when you need to establish a subscription for any explicit data source, it is essential to clean up the memory to ensure that there is no memory leak.

2. Effects without Cleanup

Sometimes, you want to run some additional code after React has updated the DOM. Manual DOM mutations, Network requests and logging are common examples of effects that don’t require a cleanup. you say that because you can run them and immediately forget about them. 
and We can use Effects without Cleanup in useEffect that does not obstruct the browser in screen updation. So there are some examples of Effects that do not need cleanup are Network requests, Manual DOM mutations, etc.

React In built Hooks API

• Basic Hooks
  useEffect
• useState
• useContext

Additional Hooks

• useCallback
• useMemo
• useRef
• useDebugValue
• useReducer
• useLayoutEffect
• useImperativeHandle