ReactJS - 警告消息“Hook useEffect 缺少依赖项”

Question

I'm getting the message in my console:

React Hook useEffect has a missing dependency: 'calculateTotalProductsPrice'. Either include it or remove the dependency array

The code is working but I dont know if is this is the proper way of implementing useEffect

Here I have a function that calculates the total price of my products and im calling it in my useEffect hook:

  // Get all products the user added from my redux store
  const allProductsAddedByUser = useSelector(state => state.createCampaign.campaign_products)

  function calculateTotalProductsPrice() {
    const productsArray = Object.values(allProductsAddedByUser)
    const totalPrice = productsArray.reduce(function (prev, cur) {
      return prev + cur.quantity * 125.0
    }, 0)
    return totalPrice
  }

  useEffect(() => {
    calculateTotalProductsPrice()
  }, [allProductsAddedByUser])

And in my html, I'm calling the function like this:

<span>€ {calculateTotalProductsPrice()}</span>

If I put the calculateTotalProductsPrice() function inside my useEffect hook, the warning from console is gone, but then I can't call my function like I was doing, I'm getting the error 'calculateTotalProductsPrice' is not defined . My function is now inside the useEffect hook, why cant I call her from outside?

  // Get all products the user added from my redux store
  const allProductsAddedByUser = useSelector(state => state.createCampaign.campaign_products)

  useEffect(() => {
    function calculateTotalProductsPrice() {
      const productsArray = Object.values(allProductsAddedByUser)
      const totalPrice = productsArray.reduce(function (prev, cur) {
        return prev + cur.quantity * 125.0
      }, 0)
      return totalPrice
    }
    calculateTotalProductsPrice()
  }, [allProductsAddedByUser])

 // Call function from my html
 <span>€ {calculateTotalProductsPrice()}</span> 
// Error calculateTotalProductsPrice is not defined

Answer 1

About the warning message:

There are 2 scenarios in this case.

The first is which is the current scenario when you need the calculateTotalProductsPrice function somewhere else in your code then you need to create outside of useEffect . One addition if that's the case which is passing it to so called dependency array, just like the following:

function calculateTotalProductsPrice() {
  // ... your calculation code
}

useEffect(() => {
  calculateTotalProductsPrice()
}, [calculateTotalProductsPrice])

In this case the warning message won't be shown again and in the same time it will be accessible in JSX as well, just like <span>€ {calculateTotalProductsPrice()}</span> .

Second is once you don't need the calculateTotalProductsPrice function outside of useEffect then you can create inside of the callback as you did in your second example.

About the accessibility of the function:

And the reason why the function calculateTotalProductsPrice is not accessible outside once you declare in useEffect is becasue of JavaScript scope. The function only accessible inside of useEffect hook because of closure, from the documentation:

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function's scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

Read further here:

1. JavaScript scope
2. Closures

I hope this helps!