You can find the first part of the eBook below. You need to download the eBook in pdf format to read the rest.
What are React Hooks?
Why were React Hooks developed?
2.1 What kind of components are there in React?
2.2 What is the Problem with Class Component?
What is useState?
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
What is useContext?
What is useReducer?
What is useCallback?
What is useMemo?
What is useRef?
What is useImperativeHandle?
What is useLayoutEffect?
What is useDebugValue?
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 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.
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.
Let's download the e-book to continue reading