React Hook

Through 4 questions introduce React Hook

What is Hook?

In computer programming, programmers use a technique to modify or extend the behavior of applications, operating systems or of other software components through intercepting calls or messages or events occurring within such components. Code which is used to perform intercepting such call messages or events is called hook. [1]

Hook is an kind of mechanism, and these functions which adopt the mechanism is called hook functions, and also those functions often named xxx hooks. So Hook is polysemous including 3 meaning: a mechanism, a function category, function names.

Why Hook is important?

Hooks has advantages like:

1. Allow developer change the behavior of a program.
2. Allow add new functionalities to application.
3. Ensure inner consistence of application.

and, compare other programming skills, Hook follows OCP [2], there for Hook is a programming best practice.

In React, they have some other considerations around developer(React has an outstanding goodness, they care about people more than others)：

1. Reuse inside logic of component, with out modify component structure like high order component.
2. Make it easy to understand complex component by split a big class into many function component. (I doubt that, it's bad both to build a huge class and many code pieces.)
3. Function component has more readability for both people and machine. (So, Java developers, how do you think?)

How many Hooks there are in React?

All Hooks in react has a common name prefix: "use", like "useState", "useEffect", and if you create a custom Hook, you should also follow this habit.

Basic Hooks

• useState
• useEffect
• useContext

Additional Hooks

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

Remmber: React Hook is not a pure function, they have states.

Communication has contribute other Hooks, like https://ahooks.js.org/

Which scenario that the Hooks suit for?

// TODO

References

[1] https://www.calltutors.com/blog/what-is-hook/
[2] https://en.wikipedia.org/wiki/Open-closed_principle
[3] https://reactjs.org/docs/hooks-intro.html