React Hooks

What are Hooks

Hooks are new feature in React version 16.8. This is allow to use the React features without having to write a class.

Why we use React Hooks

1. Peoples are struggling when they use “this” key in class components.”

“this” key word has different values depending on where it is used:

• In a method, this refers to the owner object.
• Alone, this refers to the global object.
• In a function, this refers to the global object.
• In a function, in strict mode, this is undefined.
• In an event, this refers to the element that received the event.
• Methods like call(), and apply() can refer this to any object.

2.Easier to decouple logic from UI, Making both more reusable.

3.Able to broke the component into small ones.

Hook Rules

1. Hook can be called inside React function components.
2. Hook can be called inside React function components.
3. Hooks cannot be conditional.

Now we can see the main Hooks in React

1. useState Hook

useState Hooks refer the state in a component. If we take a user his age is state property. After the one year his age was changed this is a simple example for state changes. Now look at the below picture at the initial favorite color is red after he pressed the button color value is changed. That’s like we use the useState Hook in react.

2.UseEffect Hook

useEffect Hook used to perform a side effect in our components. Example for the side effect are fetching data, timers and directly update the dom. Normally use effect run on every render. That is not a good so we can control the useEffect following the ways:

3.useContext Hook

This is used for manage the state globally. Following the pictures tell components A,D,F are they need the username but the user name in the top level components. if we use the props to pass the username through B,C and E components but they did not need the username. So in order to avoid this we use useContext.

How to use the useContext.

follow this steps in your code.

In the first picture we create the createContext and export from the top level component. Then wrapped the component by userContext.provider. Now In the second picture we used it . first import the userContext from the toplevel component and wrapped the component by userContext.Consumer. Now we can get user name and used it. This simple and maintain our code clearly.

4.useRef Hook

The useRef Hook allows to persist the values between the renders. It can be used to store the mutable value that does not cause a re-render when updated. It can be used to access a DOM element directly. if we take a login form username filed is focus this give the some awareness to the user. For this purpose we use useRef Hook.

5.useCallback Hook

The useCallback Hook returns a memorized callback function. This mean it allows to isolate resource intensive functions so that they will not automatically run on every render. if some state changes components are re render so every functions are recreated that time to avoid this we use useCallback Hook. let say if we use the same button UI for fetch data and login if we press either one of the button fetch data function and login function created again. in order to avoid we provide the state in useCallback Hook that mean if login state change only login function recreated otherwise did not re created. following the picture show this:

without useCallback

use useCallback

6.useMemo Hook

The React useMemo Hook returns memorized value. The different between the useMemo and UseCallback is useMemo return memorized value but useCallback return memorized function.

7.useReducer Hook

The useReducer Hook is similar to the useState Hook. It allows for custom state logic. If we keeping track of multiple pieces of state that rely on complex logic useReducer is useful. The useReducer Hook accepts two arguments. [useReducer(<reducer>, <initialState>)].

How to use the useReducer hook?

first off, you call the hook with two arguments. The first one is a function called a reducer, and the second one is the initial state. In the case of the counter above, the initial state is simply an object containing a “count” property initialized at 0: {count: 0}. The reducer is a function that takes two arguments: a state and an action. The state is the current state. For example, at the beginning the state has the value {count: 0}. You can think of the action as a keyword that will tell the function what to do.

In the above example, if the action is decrement it means “decrease the counter by one”. If it’s increment, you can guess what it does!. So the reducer takes the current state, and an action that tells it what action (wink wink) we want to do. The reducer does the action, then returns the new state. In this state, the action is either add or remove one to the counter. That’s the arguments! Let’s see what useReducer is returning now. As you can see in the code, the useReducer hook returns two things: the state, and a function called dispatch. This is pretty similar to useState, which also returns the state and a function to modify the state.

useReducer allows you to bring all of that state into one object which is centrally managed. For example:

That’s it. These are the main Hooks we use in the React.