Hello, I'm front Countdown, a Buddhist code monster working in Mojo, and if you like my article 📚, you can gather psychic powers for me ⭐(*°∀°) by clicking like. I wish you all an early fortune, good health and a safe life!Copy the code

Usage origin

When data is reassigned, the render of the entire component is refreshed. When data functions are complex and multiple, and some data does not need to be refreshed, it is forced to refresh, resulting in wasted performance and possible bugs. In this case, we need to use useCallback and useMemo to cache data that does not need to be updated, forming memoized values. Memo is used for child components not to re-render

Work together

Different forms of reduced repetition render

Memo usage

Suppose the Parent component has a Child component inside it

	const Parent = () = > {
		const [num,setBum] = useState(0)
		return (
			<View>
				<Button onClick={()= > setNum(num+1)} >
				<Child />
			</View>
		)
	}
	
	const Child = () => {
		console.log('child load')
		return (
			<View>child text</View>)}Copy the code
  • Click Button and the Child will refresh the rendering along with Parent and the console will print
 // child load
Copy the code
  • After using the memo
	const Child = memo(() = > {
		console.log('child load')
		return (
			<View>child text</View>)})Copy the code
  • Child is not rerendered after button is clicked, console does not print
  • Memo is a function. The second argument is an optional extension function that controls whether the component is refreshed or not. Use the same as shouldComponentUpdate

The use of the useCallback

The Parent component contains the Child component

	const Parent = () = > {
		const [num,setBum] = useState(0)
		const clickBtn = () = > {
			setNum(num+1)}return (
			<View>
				<Button onClick={clickBtn} >
				<Child call={clickBtn} />
			</View>
		)
	}
	
	const Child = memo((call) => {
		console.log('child load')
		return (
			<View onClick={call}>child text</View>)})Copy the code
  • Click Button and the Child will refresh the rendering along with Parent and the console will print
 // child load
Copy the code

The memo is invalid after passing a function to a child component due to printing inferences

  • After using useCallback
	const Parent = () = > {
		const [num,setBum] = useState(0)
		
		const clickBtn = useCallback(() = > {
			setNum(num+1)
		},[]) //[] The dependency is optional. If num is not filled in, it will not be updated
		
		return (
			<View>
				<Button onClick={clickBtn} >
				<Child call={clickBtn} />
			</View>
		)
	}
	
	const Child = memo((call) => {
		console.log('child load')
		return (
			<View onClick={call}>child text</View>)})Copy the code
  • Child is not rerendered after button is clicked, console does not print
  • The useCallback parameter [] is an optional dependency, so the clickBtn function is updated when num is not specified and the initial value of num is always 0.

UseMemo usage

The Parent component contains the Child component

	const Parent = () = > {
		const [num,setBum] = useState(0)
		
		return (
			<View>
				<Button onClick={clickBtn} >
				<Child num={num + 1} call={clickBtn} />
			</View>
		)
	}
	
	const Child = memo((num) => {
		console.log('child load')
		return (
			<View>child text {num}</View>)})Copy the code
  • Click Button and the Child will refresh the rendering along with Parent and the console will print
 // child load
Copy the code

It follows from the print that the Memo is invalid if you pass variables to child components

  • After using useMemo
   const Parent = () = > {
   	const [num,setBum] = useState(0)
   	
   	const mockData = useMemo(() = > ({
   		newNum: num + 1}), [])// [] Specifies a dependency. If num is not specified, newNum will always be 1
   	
   	return (
   		<View>
   			<Button onClick={clickBtn} >
   			<Child num={mockData.newNum} call={clickBtn} />
   		</View>
   	)
   }
   
   const Child = memo((call) => {
   	console.log('child load')
   	return (
   		<View onClick={call}>child text</View>)})Copy the code
  • The Child will not be re-rendered after clicking button. The console will not print, avoiding meaningless rendering
  • Ex: If [num] is specified, the mockData object is updated with num updates. If [num] is specified, the mockData object is updated with num updates.

The difference between

  • Memo is used for the cache component
  • UseCallback is used for caching functions
  • UseMemo is used to cache data objects, which requires a return object {}. ES6 syntax can be shortened to () => ({})
 function f1() {
 	return{}}Copy the code