To understand react. useMemo, you first need to understand react. memo

React.memo

  • React.memoApplies to function components but not to class components.
  • If a function component is the same in a givenpropsThen you can wrap the component inReact.memoThe use of.
  • useReact.memoReact skips the render component and reuses the last render.
  • React.memoWill only checkpropsChange if in useReact.memoIs present in its implementation when a component is wrappeduseState,useContextHooks, the component will still be rerendered when the context changes.

useMemo

The characteristics of

  • Takes two arguments, the first of which is()=>value.
  • The second argument is the dependency, which is[m,n].
  • The new value is computed only when the dependency changes.
  • If the dependency does not change, then the previous value is reused.
  • Just like the computed property in Vue2, computed.

Matters needing attention

  • If value is a function, then the Hook should be written in the following cumbersome form:
useMemo( ( ) => (x) = > console.log( x ))
Copy the code
  • This is a function that returns a function.
  • The React team added another one because it didn’t workuseCallback.

UseCallback usage

  • useCallback(x=>console.log(x), [m])Is equivalent touseMemo(()=>x=>console.log(x),[m])