React Hook useCallback has an unnecessary dependency: 'price'. Either exclude it or remove the dependency array.?

Question

[miliko mikoyan]

import ReactDOM from "react-dom";
import React, { Fragment, useState, useCallback } from "react";

const ProcessingSearch = () => {
  const [price, setPrice] = useState({ maxPrice: 0, minPrice: 0 });
  const [solde, setSolde] = useState(0);
  const inputMaxMin = useCallback(
    ({ target: { value, name } }) => {
      name === "maxPrice"
        ? setPrice(({ minPrice }) => ({ maxPrice: value, minPrice }))
        : setPrice(({ maxPrice }) => ({ minPrice: value, maxPrice }));
    },
    [price]
  );

  return (
    <Fragment>
      <form onSubmit={() => {}}>
        {"Min"}
        <input value={price.minPrice} onChange={inputMaxMin} />
        {"Max"}
        <input value={price.maxPrice} onChange={inputMaxMin} />
        <input type="submit" title={"Submit price range"} value={"Go"} />
      </form>
      <div onClick={() => setSolde(solde + 1)}>{solde}</div>
    </Fragment>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<ProcessingSearch />, rootElement);

Когда я использую price, я получаю сообщение об ошибке:

React Hook useCallback has an unnecessary dependency: 'price'. Either exclude it or remove the dependency array.

Answer 1

[Антон Спирин]

У вас колбек inputMaxMin переопределяется по изменению price, но в этом нет необходимости, так как в колбеке это значение не используется. Просто передавайте вторым аргументом пустой массив:

const inputMaxMin = useCallback(
  ({ target: { value, name } }) => {
    name === "maxPrice"
      ? setPrice(({ minPrice }) => ({ maxPrice: value, minPrice }))
      : setPrice(({ maxPrice }) => ({ minPrice: value, maxPrice }));
  },
  [],
);

Comments

[miliko mikoyan]

const inputMaxMin = useCallback(
  ({ target: { value, name } }) => {

console.log(price.maxPrice);

    name === "maxPrice"
      ? setPrice(({ minPrice }) => ({ maxPrice: value, minPrice }))
      : setPrice(({ maxPrice }) => ({ minPrice: value, maxPrice }));
  },
  [price],
);

а если вот так ? вот сейчас надо да

[Антон Спирин]

miliko mikoyan, да если используете price, то надо передавать вторым аргументом в массиве.

[miliko mikoyan]

Антон Спирин В каком смысле второй аргумент.Почему недостаточно price ?.как бы он по-любому меняется.

[Антон Спирин]

miliko mikoyan, я, имел ввиду, что массив это второй аргумент, в него и передавать. Как в вашем примере. Запятую забыл)

[miliko mikoyan]

Антон Спирин, ((((((((((ok