What are React Hooks?

You can find the first part of the eBook below. You need to download the eBook in pdf format to read the rest.

1. What are React Hooks?

2. Why were React Hooks developed?

   2.1 What kind of components are there in React?

   2.2 What is the Problem with Class Component?

3. What is useState?

4. What is useEffect?

   4.1 What is it?

   4.2 If State is Updated in useEffect

   4.3 Clearing SideEffect Dependencies in useEffect

   4.4 Managing different props dependencies and their side effects with useEffect

5. What is useContext?

6. What is useReducer?

7. What is useCallback?

8. What is useMemo?

9. What is useRef?

10. What is useImperativeHandle?

11. What is useLayoutEffect?

12. What is useDebugValue?

1. What are React Hooks?

What does hook mean? Hook. Throwing a hook somewhere in the code. In other words, it means giving our component power and capability by hooking into a common set of functions.

If you are familiar with Aspect Oriented Programming or Cross-Cut, maybe these concepts will not be foreign to you. Some capabilities need to be used commonly by components. There are four ways to share a standard capability's code logic.

• Inheritance
• High Order Component
• Render Props
• Hooks

Inheritance logic in code sharing is not suitable for UI structures but more suitable for Model structures.

Therefore, there are three logical methods for UI in code sharing. These are HoC, Render Props, and Hooks. These methods have advantages and disadvantages over each other. I will be addressing these in the following topics.

What we call standard code is that there are common codes such as measurable, themeable, and filterable. Well, the same algorithm and the same business logic will be operated. How about if we developers write it in Functions (Capabilities), components hook into them, and use them?

Note Immediately, what's the difference between writing Util JS and calling a function from it? And as we will see in the future, the parts we are working on here are not just code; we also need to use the APIs that React provides us in these functions to create Views.

React also has the idea of developing its components as more light-weight function components. When necessary, they want to use to take advantage of the libraries they need; that is, they want to use the structures where you hook the relevant function to use.

Let's do some brainstorming. React UI Components we will need what kind of capabilities.

• Keeping State (useState)
• Reflect Side Effect (useEffect)
• Hover (useHover)
• LifeCycle (, useDidUpdate) useDidMount
• Redux Store (useSelector, useDispatch, useStore)
• React Router (useHistory, useLocation, useParams, useRouteMatch)
• Data Fetch (useFetch)
• Theme (useTheme)
• Wait (useWait)
• Screen Dimensions ( useWindowDimension)
• We can think of many common capabilities like useReducer, useRef, etc.

In my head, I have a structure similar to the picture below. Components assign Hooks to these capabilities with useHooks

Note: We could give these capabilities to components with High Order Functions or Render Props, Chain methods without using inheritance in Class Component (Components). That's right; we have been using these methods long. But this has two disadvantages.

• The code that wraps components like h(g(f(x))) reduces the readability of the code too much and needs to be executed as a chain sequence (pipe).
• Secondly, let x=view; for example, f, g, and h are not enough to be just functions to that, we will add capabilities. Due to the React structure, they must be a component, and the render function must be called. However, none of the abilities I mentioned above are related to rendering (drawing on the screen). Still, it needs to be able to render the subcomponents it contains in the tree structure.

Continue

Let's download the e-book to continue reading