React Hooks

1. Rules

1.1. Only call hooks at the top level

1.1.1. Don’t call hooks inside loops, conditions, or nested functions.

1.2. Only call hooks from function components / custom hooks

1.2.1. Don’t call hooks from regular JavaScript functions / class components.

1.3. Prefix custom hooks with "use"

1.3.1. Neccessary for linting, which can help enforce the 2 rules above

2. Motivation

2.1. Reuse stateful logic between components

2.2. Use more of React’s features without classes

3. Resources

3.1. Collection of React Hooks

3.2. React Hook Recipes

3.3. Simplify React Apps with Hooks

3.4. eslint-plugin-react-hooks

4. Notes

4.1. Completely opt-in

4.2. No breaking changes

4.3. Available from v.16.8

5. Definition

5.1. Hooks are functions that let you “hook into” React state and lifecycle features from function components.

5.2. Hooks don’t work inside classes — they let you use React without classes.

6. Types

6.1. Built-in

6.1.1. Basic Hooks

6.1.1.1. useState

6.1.1.1.1. const [state, setState] = useState(initialState);

6.1.1.2. useEffect

6.1.1.2.1. useEffect(didUpdate);

6.1.1.3. useContext

6.1.1.3.1. const context = useContext(Context);

6.1.2. Additional Hooks

6.1.2.1. useReducer

6.1.2.1.1. const [state, dispatch] = useReducer(reducer, initialArg, init);

6.1.2.2. useCallback

6.1.2.2.1. const memoizedCallback = useCallback(fn, deps);

6.1.2.3. useMemo

6.1.2.3.1. const memoizedValue = useMemo(() => fn, deps);

6.1.2.4. useRef

6.1.2.4.1. const refContainer = useRef(initialValue);

6.1.2.5. useImperativeHandle

6.1.2.5.1. useImperativeHandle(ref, createHandle, [deps])

6.1.2.6. useLayoutEffect

6.1.2.6.1. useLayoutEffect(didUpdate);

6.1.2.7. useDebugValue

6.1.2.7.1. useDebugValue(value)

6.2. Custom

6.2.1. We can build our own hooks!

6.2.2. Custom Hooks are a mechanism to reuse stateful logic

6.2.3. All state and effects inside of custom hooks are fully isolated