React Hooks

In this article, I am going to share with you my understanding of hooks like why we need hooks? What are hooks? And how we can use hooks?

Why we need hooks?

Using react hooks they are trying to resolve three major issues those are Huge components, Duplicated logic, and Complex pattern.

What are the hooks?

React Hooks is a new feature that is added to react.js with react 16.8. Previously if you want to use state or life cycle then you should have to write only Class components but with the help of hooks, you can do the same thing with functional components.
Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes, they let you use React without classes
I think Hooks let us build components with less effort. Each Hook may contain some local state and side effects. You can pass data between multiple Hooks just like you normally do between functions.
React have some built-in hooks like useState and useEffect serve as the basic building blocks. We can use them from our components directly or you can create your own custom Hooks. A custom Hook (we’ll talk about this in a moment) is a JavaScript function whose name starts with ”use”.

useState

useState is a Hook. We call it inside a function component to create a local state to it. useState returns a pair of the current state value and a function that lets you update it. You can call this function from an event handler or somewhere else. It’s very much similar to this.setState in a class but it has one big difference with this.setState is, it doesn’t merge the old and new state together it will just replace that. But nothing to worry here because You can use the State Hook more than once in a single component.

const [state, setState] = useState(initialState);
//you can give any name for you state and setState function. initialState is the defult value thatever you want to set. 

useEffect

useEffect, adds the ability to perform side effects from a function component. It serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React classes. useEffect will run after the render is committed to the screen.
By default, effects run after every completed render, but you can choose to fire them only when certain values have changed. Effects may also optionally specify how to “clean up” for that you just need to return a function after userEffect function. Just like with useState, you can use more than a single effect in a component.
userEffect takes two arguments first will be the function that will run after every completed render and the second argument is an array of dependency of that function that we can pass. Whatever value we will pass in this array that value change will decide to run that function.

Effects may also optionally return a function where we can do clean up task. This function will run just right before userEffect will run next time.

useEffect(() => {
    // it will run after every completed render so it’s very much similar with componentDidUpdate but it will run when component will mount first time also.
  });

useEffect(() => {
    // it will run only once when the component will mount so it’s just like componentDidMount  
  },[]);

useEffect(() => {
    // it will run after every completed render  
  }
return () => {
    // you can do the clean up here
});

useContext

Accepts a context object (the value returned from React.createContext) and returns the current context value for that context. The current context value is determined by the value prop of the nearest above the calling component in the tree.
A component calling useContext will always re-render when the context value changes. If re-rendering the component is expensive, you can optimize it by using memoization.

const value = useContext(MyContext);

Custom Hook

If you want to build your own hooks for your reusable functions then you can. A custom Hook is a JavaScript function whose name starts with ”use”. it’s just like a normal function so it may take arguments and may return something. Its name should always start with use so that react will treat this as hooks and the rules of Hooks apply to it.

function useCustomHook() {
  // Wright your custom hook logic here
}