useState
1 | // basic |
useEffect
Create side effects
replacement for componentDidMount, componentDidUpdate, componentWillUnMount
1 | // basic |
setInterval
1 | // depends on count |
fetching data only once
1 | const [data, setData] = useState([]) |
fetching data depends on state change
1 | const [id, setId] = useState(1) |
useContext
Context provides a way to pass data through the component three without having to pass props down manually at every level.
Basic usage:
1 | // App.js |
useReducer
useReducer is a hook that is used for state management in React.
reduce in Javascript |
useReducer in React |
---|---|
array.reduce(reducer, initialState) |
useReducer(reducer, initialValue) |
singleValue = reducer(accumulator, itemValue) |
newState = reducer(currentState, action) |
reduce method returns a single value | useReducer returns a pair of values, [newState, dispatch] |
Imitate redux
reducer, but a local state management:
1 | // CounterOne.js |
useReducer
with useContext
as a global state management:
1 | // App.js |
Fetching data with useReducer
:
1 | const initialState = { |
useState
vs useReducer
Scenario | useState |
useReducer |
---|---|---|
Type of state | Number,String,Boolean | Object or Array |
Number of state transitions | One or two | Too many |
Related state transitions? | No | Yes |
Business logic | No business logic | Complex business logic |
Local vs Global | Local | Global |
useCallback
For performance optimization, we have to restrict re-renders to only components that need to re-render.
useCallback
is a hook that will return a memorized version of the callback function that only changes if one of the dependencies has changed.
It is useful when passing callbacks to optimized child components that reply on reference equality to prevent unnecessary renders.
React.memo
可以使子组件只有接受的 props 改变时才会渲染,防止父组件 re-render 导致全部子组件 re-render。
对于一般的非引用类型变量React.memo
可以起作用,但是由于 function 每次定义地址并不相同,还是会 re-render,所以需要useCallback
创建一个根据条件变化的 function。
useCallback
是为了防止 re-render 后由于重新定义了 function,导致以 function 作为 props 传入的子组件也进行了不必要的渲染。
example:
1 | // Button.js |
useMemo
useMemo
is a hook that will only recompute the cached value when one of the dependencies has changed, this optimisation heads to avoid expensive calcuations on every render.
1 | function UseMemoTest(){ |
useRef
useRef
is used to access dom node
.
1 | function FocusInput() { |
useRef
can be used to store data, and not cause re-render when data change, because only current change, the object that useRef
return is persistent.
1 | function HookTimer() { |
React.forwardRef
It can be useful for some kinds of components, especially in reusable component libraries.
1 | const Button = React.forwardRef((props, ref) => ( |
useImperativeHandle
1 | useImperativeHandle(ref, createHandle, [deps]) |
should be used with forwardRef
.
ref change, handle function run.
1 | function FancyInput(props, ref) { |
useLayoutEffect
The signature is identical to useEffect
, but it fires synchronously after all DOM mutations. Use this to read layout from the DOM and synchronously re-render. Updates scheduled inside useLayoutEffect
will be flushed synchronously, before the browser has a chance to paint.
Prefer the standard useEffect
when possible to avoid blocking visual updates.
useDebugValue
useDebugValue
can be used to display a label for custom hooks in React DevTools.
1 | function useFriendStatus(friendID) { |
Custom hooks
share useEffect
1 | // useDocumentTitle.js |
share useState
and methods
1 | function useCounter(initialCount = 0) { |
share input change logic
1 | // useInput.js |
react-redux hooks
You can use react-redux hooks to replace connect
function in FC.
useSelector
1 | function Loading() { |
useDispatch
1 | function Login(){ |
useStore
1 | export const CounterComponent = ({ value }) => { |
Reference:
https://reactjs.org/docs/hooks-reference.html
https://www.youtube.com/playlist?list=PLC3y8-rFHvwisvxhZ135pogtX7_Oe3Q3A