Реагировать useEffect сравнение объектов

Использовать apiOptions как значение состояния

Я не уверен, как вы используете пользовательский хук, но создание apiOptions как значения состояния с помощью useState должно работать нормально. Таким образом, вы можете передать его своему пользовательскому хуку как значение состояния, например:

const [apiOptions, setApiOptions] = useState({ a: 1 })
const { data } = useExample(apiOptions)

Таким образом, это изменится только при использовании setApiOptions.

Пример # 1

import { useState, useEffect } from 'react';

const useExample = (apiOptions) => {
  const [data, updateData] = useState([]);
  
  useEffect(() => {
    console.info('effect triggered')
  }, [apiOptions]);

  return {
    data
  };
}
export default function App() {
  const [apiOptions, setApiOptions] = useState({ a: 1 })
  const { data } = useExample(apiOptions);
  const [somethingElse, setSomethingElse] = useState('default state')

  return <div>
    <button onClick = {() => { setApiOptions({ a: 1 }) }}>change apiOptions</button>
    <button onClick = {() => { setSomethingElse('state') }}>
      change something else to force rerender
    </button>
  </div>;
}

Альтернативно

Вы можете написать глубоко сопоставимый useEffect, как описано здесь:

function deepCompareEquals(a, b){
  // TODO: implement deep comparison here
  // something like lodash
  // return _.isEqual(a, b);
}

function useDeepCompareMemoize(value) {
  const ref = useRef() 
  // it can be done by using useMemo as well
  // but useRef is rather cleaner and easier

  if (!deepCompareEquals(value, ref.current)) {
    ref.current = value
  }

  return ref.current
}

function useDeepCompareEffect(callback, dependencies) {
  useEffect(
    callback,
    dependencies.map(useDeepCompareMemoize)
  )
}

Вы можете использовать его так же, как и useEffect.

Я только что нашел решение, которое мне подходит.

Вы должны использовать usePrevious() и _.isEqual() от Lodash. Внутри useEffect() вы устанавливаете условие, если предыдущийapiOptions равно ТекущийapiOptions. Если это правда, ничего не делать. Если ложно updateData ().

Пример :

const useExample = (apiOptions) => {

     const myPreviousState = usePrevious(apiOptions);
     const [data, updateData] = useState([]);
     useEffect(() => {
        if (myPreviousState && !_.isEqual(myPreviousState, apiOptions)) {
          updateData(apiOptions);
        }
     }, [apiOptions])
}

usePrevious(value) - это настраиваемая ловушка, которая создает ref с useRef().

Вы можете найти его в Официальная документация React Hook.

const usePrevious = value => {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
};

Если вы действительно уверены, что не можете управлять apiOptions, просто замените собственный useEffect на https://github.com/kentcdodds/use-deep-compare-effect.

Если ввод достаточно мелкий, и вы думаете, что глубокое равенство все равно будет быстрым, рассмотрите возможность использования JSON.stringify:

const useExample = (apiOptions) => {
    const [data, updateData] = useState([]);
    const apiOptionsJsonString = JSON.stringify(apiOptions);

    useEffect(() => {
       const apiOptionsObject = JSON.parse(apiOptionsJsonString);
       doSomethingCool(apiOptionsObject).then(response => {               
           updateData(response.data);
       })
    }, [apiOptionsJsonString]);

    return {
        data
    };
};

Обратите внимание, что он не сравнивает функции.

Вы можете использовать useDeepCompareEffect, useCustomCompareEffect или написать свой собственный хук.

https://github.com/kentcdodds/use-deep-compare-effecthttps://github.com/sanjagh/use-custom-compare-effect

Предположим, что большая часть вашего apiOptions статична и не меняется при повторном рендеринге компонента, я предлагаю следующий подход:

const useExample = (apiOptions, deps) => {

  useEffect(callback, deps);

  return { ... };
};

Идея состоит в том, чтобы передать в качестве второго параметра только массив значений, от которых зависит эффект.