A opinioned intro to React Hooks

My own thoughts

People are crazy about hooks, in the mean time, I don't think I get the essential information from almost every articles introducing hooks. They all seem to be copy-pasted beginner level tutorial. Especially, with a strong flavor of functional programming, it is important to figure out how data immutability work in hooks, and how separated unit tests can be achieved.

For example, in React, comparing previous variable and current variable (e.g. memoize mechanism, shouldComponentUpdate in PureComponent ) is a essential way to optimize calculation and update. With hooks like useEffect, it is important to know if the dependencies are persistent across each render/update, say, if a dependency is an object defined in the function scope, how could it be the same in each render.

These are some articles with my own research and interpretation on hooks, that gives myself a clear picture about how should hook being used properly.

Content

1. General reason and benefits with personal interpretation for each hooks

2. Mindset change from class component to functional component

3. How to test custom hooks

TL;DR;

1. Hooks are aiming for grouping and reusing logics

2. In functional component, "code as if any value can change at any time", but keep in mind state, dispatch, ref.current, and some memoized variables could be persistent across update

3. Hooks unit test requires a test wrapper component.

4. A good folder structure for hook and good unit tests are required to utilize hooks true power