React Hooks

Mindmap of React Hooks: definition, motivation, rules, types and resources. Repo:

Get Started. It's Free
or sign up with your email address
React Hooks by Mind Map: 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 useState const [state, setState] = useState(initialState); useEffect useEffect(didUpdate); useContext const context = useContext(Context);

6.1.2. Additional Hooks useReducer const [state, dispatch] = useReducer(reducer, initialArg, init); useCallback const memoizedCallback = useCallback(fn, deps); useMemo const memoizedValue = useMemo(() => fn, deps); useRef const refContainer = useRef(initialValue); useImperativeHandle useImperativeHandle(ref, createHandle, [deps]) useLayoutEffect useLayoutEffect(didUpdate); useDebugValue 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