Hooks

# Topic: Hooks

## useSelector, useDispatch

useSelector , useDispatch 是两个 react-redux 提供的hooks,这样就不需要 mapStateToProps

mapDispatchToProps

## useState

https://github.com/ZhangMYihua/use-state-example

## useEffect

a function gets called whenever the update lifecycle method (re-render) is fired

use Async function in useEffect

The code above will cause an infinite loop between:

setUser (update DOM) -> useEffect -> setUser -> useEffect…

If we want condition, we put them into useEffect

## Class-based component to Function-based component

Some thing we changed from class-based components to function-based components:

1. this.state -> useState

2. this.props

We destructure props we want from the input params of the function component

One component will re-render only in three conditions:

1. Props change
2. setState from useState
3. parent re-render

# useEffect Cheat Sheet

A quick recap of what we have learned about useEffect:

# Custom Hook

https://github.com/ZhangMYihua/custom-hook-example

# useReducer

https://github.com/ZhangMYihua/useReducer-example

https://reactjs.org/docs/hooks-reference.html#usereducer

https://react-redux.js.org/api/hooks

# React-Redux Hook

## useSelector, useDispatch

useSelector: Allows you to extract data from the Redux store state, using a selector function.

The selector is approximately equivalent to the mapStateToProps argument to connect conceptually.

useSelector() will also subscribe to the Redux store, and run your selector whenever an action is dispatched.

useDispatch: This hook returns a reference to the dispatch function from the Redux store. You may use it to dispatch actions as needed.

selector itself is a function receives state object

useSelector receives a selector that returns some state, and useSelector will ensure to up-to-date with the state.

When a functional component gets re-rendered, do it from top to bottom in synchronous manner.

A component is re-rendered if

1. Props change
2. State change
3. parent re-render

We can pass in a function into useState

If a function is dependent on a state, we shall put that function into useEffect. If not, we can place it out of component so it only renders once.

## useCallback

If a function depends on a state but is outside of useEffect We cannot know its dependency from looking at the code.

we can use useEffect to preserve function outside of useEffect and know its dependency

## useMemo

This will always be re-rendered every single time regardless of whether myObj changed or not

(reference comparison, a new object is initialize every single time for the functional component re-rendering)

useMemo and useCallback can be very helpful when you want some behavior to be performed based on a specific object or function

## useLayoutEffect

useEffect runs after the paint of the component

useLayoutEffect runs before the paint of the component

## useContext

Component way of using context (replacing Redux)

useContext

However, useContext is not very handy when we need to update a state. The problem it solves is to easily pass a state of a high node in the DOM tree easily to the lower state.

An example: