Lädt...


🔧 useCallback VS useMemo


Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to

We all know how to use React.useCallback and React.useMemo, but sometimes we will be confused about which one we should choose.

Here I will show you guys some cases to help you understand what hook function we should use in some specific situations.

import React, { useState } from 'react'

export default function App() {
  const [num1, setNum1] = useState(10)
  const [num2, setNum2] = useState(12)

  return <div>{num1 + num2}</div>
}

In the above simple example case, we can just get the sum by num1 + num2 in the HTML element part, but if we have some more complex calculation logic, we shouldn't do that anymore.

import React, { useState, useMemo } from 'react'

export default function App() {
  const [num1, setNum1] = useState(10)
  const [num2, setNum2] = useState(12)

  const sum = useMemo(() => {
    const _num1 = Number(num1),
      _num2 = Number(num2)
    if (Number.isNaN(_num1) || Number.isNaN(_num2)) {
      return "check your num's type"
    }
    return _num1 + _num2
  }, [num1, num2])

  return <div>{sum}</div>
}

In this example code block, we chose useMemo to keep the result value of num1 + num2, but we add some type check logic, because we can't totally trust the num1 or num2's type would be number, so when the type goes wrong, we will show the placeholder text.

In this situation, you can't realize this effect in the HTML part with simple code in one line. Of course, you can write some logic code in the HTML part with conditional operators (JSX allow you to do that), but the cost is sacrificing the readability of the code.

So, useMemo is a good choice to handle this case.

Ok, let's go on one more complex case.

import React, { useState, useMemo } from 'react'

export default function App() {
  const [num1, setNum1] = useState(10)
  const [num2, setNum2] = useState(12)
  const [num3, setNum3] = useState(100)
  const [num4, setNum4] = useState(120)

  const sum1 = useMemo(() => {
    const _num1 = Number(num1),
      _num2 = Number(num2)
    if (Number.isNaN(_num1) || Number.isNaN(_num2)) {
      return "check your num's type"
    }
    return _num1 + _num2
  }, [num1, num2])

  return (
    <>
      <div>{sum1}</div>
      <div>{num3 + num4}</div>
    </>
  )
}

As you can see, we have num3 and num4 here to render the sum of them. If we also want to reuse the logic of num1 + num2, what should we do? Of course we can still use useMemo to define one sum2, but it's not a good idea to reuse the logic to validate the num's type. So we need split the validate logic out from the useMemo. Then useCallback shows up!

import React, { useState, useCallback } from 'react'

const validteNumAndSum = (number1, number2) => {
  const _num1 = Number(number1),
    _num2 = Number(number2)
  if (Number.isNaN(_num1) || Number.isNaN(_num2)) {
    return "check your num's type"
  }
  return _num1 + _num2
}

export default function App() {
  const [num1, setNum1] = useState(10)
  const [num2, setNum2] = useState(12)
  const [num3, setNum3] = useState(100)
  const [num4, setNum4] = useState(120)

  const sumFunc = useCallback(validteNumAndSum, [])

  return (
    <>
      <div>{sumFunc(num1, num2)}</div>
      <div>{sumFunc(num3, num4)}</div>
    </>
  )
}

As you can see, we use useCallback to return a new function with the logic of validating num's type and calculating the sum, and we reuse this validteNumAndSum function in the HTML part easily.

Ok, let's go to the conclusion part:

If you can easily make a calculation (math or more complex situation), you don't need both of them useMemo and useCallback.

If your calculation logic is complex and just needs to be calculated once only, you can pick the useMemo hook to package your calculation process and return one simple result.

But if you would use the same logic more than one time, you can choose useCallback to return a memorized function to reuse it in your component.

I am so sorry about useCallback case. I made a mistake that is to explain when to choose useCallback and created a bad example case.

Here I will try again.

import React, { useState, useCallback } from 'react'

export default function App() {
  const [base, setBase] = useState(0)
  const [num1, setNum1] = useState(10)
  const [num2, setNum2] = useState(12)
  const [num3, setNum3] = useState(100)
  const [num4, setNum4] = useState(120)

  const sumFunc = useCallback(
    (number1, number2) => {
      const _num1 = Number(number1),
        _num2 = Number(number2)
      if (Number.isNaN(_num1) || Number.isNaN(_num2)) {
        return "check your num's type"
      }
      return _num1 + _num2 + base
    },
    [base],
  )

  return (
    <>
      <input
        type="number"
        value={base}
        onChange={e => {
          setBase(Number(e.target.value))
        }}
      />
      <div>{sumFunc(num1, num2)}</div>
      <div>{sumFunc(num3, num4)}</div>
    </>
  )
}

In the code above, we add one base number as another variable data, and every sum should be added with the base value, and we have an input to change the value of base, so every time base is changed and sumFunc would be modified too, and we can use it to calculate the right result.

So I will update my conclusion about useCallback: if we just need to reuse some logic, we can package this logic into a function and even split it out from the component as a util function to reuse it anywhere. And if our logic still relies on some variable of the component, we can use useCallback to package the logic and return a memorized new function.

...

🔧 Better React Performance – When to Use the useCallback vs useMemo Hook


📈 45.85 Punkte
🔧 Programmierung

🔧 Optimizing React Performance with React.memo, useCallback, and useMemo


📈 45.85 Punkte
🔧 Programmierung

🔧 `useCallback` vs `useMemo` Hooks


📈 45.85 Punkte
🔧 Programmierung

🔧 Understanding `useMemo` and `useCallback`: A Comprehensive Guide


📈 45.85 Punkte
🔧 Programmierung

🔧 React : useCallback vs useMemo


📈 45.85 Punkte
🔧 Programmierung

🔧 useCallback VS useMemo


📈 45.85 Punkte
🔧 Programmierung

🔧 React hooks deep dive - useCallback, useMemo, and memo


📈 45.85 Punkte
🔧 Programmierung

🔧 What's the Difference Between the useMemo and useCallback Hooks?


📈 45.85 Punkte
🔧 Programmierung

🔧 Implement React v18 from Scratch Using WASM and Rust - [18] Implement useRef, useCallback, useMemo


📈 45.85 Punkte
🔧 Programmierung

🔧 usememo & useCallback hook


📈 45.85 Punkte
🔧 Programmierung

🔧 Understanding React Hooks: How to Use useRef, useMemo, and useCallback for More Efficient Code


📈 45.85 Punkte
🔧 Programmierung

🔧 useMemo vs useCallback


📈 45.85 Punkte
🔧 Programmierung

🔧 ⚡️React Performance Optimization: useMemo vs useCallback


📈 45.85 Punkte
🔧 Programmierung

🔧 React Usecallback for Kids/Beginners


📈 23.26 Punkte
🔧 Programmierung

🔧 Updating Monaco broke Fastly Fiddle: here's how I solved it with useCallback in React


📈 23.26 Punkte
🔧 Programmierung

🔧 Demystifying React Hooks–useCallback


📈 23.26 Punkte
🔧 Programmierung

🔧 ⚛Os 10 React Hooks Mais Úteis: 06 - useCallback⚛


📈 23.26 Punkte
🔧 Programmierung

🔧 useCallback Hook Explained


📈 23.26 Punkte
🔧 Programmierung

🔧 A Quick dive into useCallback hook: concepts and how to use it


📈 23.26 Punkte
🔧 Programmierung

🔧 Exploring React's useCallback Hook: A Deep Dive


📈 23.26 Punkte
🔧 Programmierung

🔧 useCallback


📈 23.26 Punkte
🔧 Programmierung

🔧 Cache your fetcher in useSWR with useCallback.


📈 23.26 Punkte
🔧 Programmierung

🔧 React-Hooks useEffect und useCallback bereiten Entwicklern Kopfzerbrechen


📈 23.26 Punkte
🔧 Programmierung

📰 React-Hooks useEffect und useCallback bereiten Entwicklern Kopfzerbrechen


📈 23.26 Punkte
📰 IT Nachrichten

🔧 useEffect, useRef and useCallback with 1 project


📈 23.26 Punkte
🔧 Programmierung

🔧 useCallback: When should we use?


📈 23.26 Punkte
🔧 Programmierung

🔧 Optimize React Components with useCallback()


📈 23.26 Punkte
🔧 Programmierung

🔧 How to create useCallback hook in vanilla js?


📈 23.26 Punkte
🔧 Programmierung

🔧 Usage of useMemo hook in React


📈 22.6 Punkte
🔧 Programmierung

🔧 Boost React Performance with useMemo: Stop Unnecessary Re-renders 🚀


📈 22.6 Punkte
🔧 Programmierung

🔧 In-Depth Guide to Using useMemo() Hook in React


📈 22.6 Punkte
🔧 Programmierung

🔧 Understanding React's useMemo: What It Does, When to Use It, and Best Practices


📈 22.6 Punkte
🔧 Programmierung

🔧 ⚛Os 10 React Hooks Mais Úteis: 07 - useMemo⚛


📈 22.6 Punkte
🔧 Programmierung

🔧 useMemo Hook


📈 22.6 Punkte
🔧 Programmierung

matomo