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

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

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, use-reducer-with-side-effect