> For the complete documentation index, see [llms.txt](https://notes.lirenxn.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://notes.lirenxn.com/2020/wk-notes-01-22-about-hooks.md).

# Wk-notes-01-22-about-Hooks

### My own notes to React hooks

**Why hooks, hooks benefit**

1. **Reuse stateful logic :** Hard to reuse stateful logic for component. **class :** HOC and renderProps, **Hooks :** custom hooks
2. **Manage lifecycle logic :** Separated and complex logic in `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount`, can be better managed by `useEffect()`, and more testable
3. **Easy to understand/learn :** `class` introduce javascript `this`
4. **Compile/performance benefit :** Enables [ahead-of-time compilation](https://en.wikipedia.org/wiki/Ahead-of-time_compilation)

### **My own reason**

Because I have adapted myself pretty well to class component, there is not too much initialtives for myself to change. However, I would like to change because react encourage dev to do so, and lifecycle effect is hard in `class`.

> The distinction between function and class components in React and when to use each one leads to disagreements even between experienced React developers.

**Hooks** tried to solve this issue, which means encourage everyone to use functional component.

> We intend for Hooks to cover all existing use cases for classes, but **we will keep supporting class components for the foreseeable future.** At Facebook, we have tens of thousands of components written as classes, and we have absolutely no plans to rewrite them. Instead, we are starting to use Hooks in the new code side by side with classes.

`class` is supported because of legacy.

### **Detail**

**Variable persistent rules**

Function will be called for every update/re-render, as `render()`.

**Persistent variable:**

* `useState`, `dispatch`
* `state` only when updating with `setState()` **NOT** called
* `const r = useRef();` => r.current;
* `const res = useMemo(() => res, [deps]); const callback = useCallback(cb, [deps]);` only when `deps` **NOT** changed

> The best mental rule I’ve found so far with hooks is ”code as if any value can change at any time”. -- [Fredrik Höglund](https://mobile.twitter.com/EphemeralCircle/status/1099095063223812096)

***BE PANIC!***

**useState**

Just a new way to setup and use state. Just remember to use it in the beginning of the FC, considering it as defining variable **for the FC scope**.

**useReducer**

A hook that create a Redux store **for complex state management**. To use it with sideEffect, we make a custom hook to call

```
const [{ originalState, sideEffects }, dispatch] = useReducer();
useEffect( () => { 
  sideEffects.forEach(effect => {
    effect(state, dispatch);
  }
},[sideEffects]);
```

<https://reactjs.org/docs/hooks-faq.html#how-to-avoid-passing-callbacks-down>

**How to avoid passing callbacks**

> But please remember to keep `PureComponent` on the shelf until you have a measurement to justify it.

> There are no silver bullets when it comes to performance. You have to measure.

<https://reacttraining.com/blog/react-inline-functions-and-performance/#my-own-experience-with-purecomponent>

<https://reactjs.org/docs/hooks-faq.html#are-hooks-slow-because-of-creating-functions-in-render>

<https://kentcdodds.com/blog/usememo-and-usecallback>

**Do NOT be obssessed with `PureComponent` optimization**

**Premutual React optimization**

**E.G.** <https://reactjs.org/docs/hooks-reference.html#useimperativehandle>

Rare, **should** used with `React.forwardRef()`, and bind the forwarded ref behavior with imperative selected `ref`.

**useImperativeHandle**

**E.G.** <https://reactjs.org/docs/hooks-reference.html#usecontext>

New `Context.Consumer`, with the initiative to avoid **HOC** pattern. Used with `React.creataContext()`.

**useContext**

Use a dependency array to persistent/memoize variable/callback. Just like `reselect` or `memoize-one`.

**useMemo/useCallback**

A funny way to create call `this.ClassPropertyVariable`. However, use value from `r.current`. Normally used as `React.node` reference.

**useRef**

Just `componentDidMount` + `componentDidUpdate` combined

**useEffect/useLayoutEffect**

**Ref:** [Blog](https://codeburst.io/colocating-side-effects-with-actions-using-usereducer-490368c96f77), [use-reducer-with-side-effect](https://github.com/conorhastings/use-reducer-with-side-effects/blob/master/src/index.js)