Use apiOptions as state value

I'm not sure how you are consuming the custom hook but making apiOptions a state value by using useState should work just fine. This way you can serve it to your custom hook as a state value like so:

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

This way it's going to change only when you use setApiOptions.

Example #1

import { useState, useEffect } from 'react';

const useExample = (apiOptions) => {
  const [data, updateData] = useState([]);
  
  useEffect(() => {
    console.log('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>;
}

Alternatively

You could write a deep comparable useEffect as described here:

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)
  )
}

You can use it like you'd use useEffect.

It would be easier to use use-deep-compare-effect library, it provides a hook like useEffects, but it compares the dependent objects deeply with their previous values.

import useDeepCompareEffect from 'use-deep-compare-effect';
...
useDeepCompareEffect(() => {
    // The codes that were in the useEffects previously
}, [dependentObject]);

Also, here is the link to this library:

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

What is the most efficient way

The most efficient way is likely a custom compare for this particular shape of data. You could use JSON.stringify or some other generic comparing function, but it's not likely to be the most efficient for obvious reasons.

So in your example a simple compare function might look like ->

const array1 = [{id:1,title:'one'},{id:2,title:'two'},{id:3,title:'three'}];
const array2 = [{id:1,title:'one'},{id:2,title:'two'},{id:3,title:'four'}];

const arrayIsEqual = (a1, a2) => 
  a1 === a2 ||
  a1.length === a2.length &&
  a1.every((f,i) => 
    f.id === a2[i].id &&
    f.title === a2[i].title
  )
  
  
//tests
const a1clone = [...array1];

//different arrays not equal
console.log(arrayIsEqual(array1, array2)); //false

//different arrays equal
console.log(arrayIsEqual(array1, a1clone)); //true

//different arrays same values, but different order
a1clone.reverse();
console.log(arrayIsEqual(array1, a1clone)); //false

//same arrays, fastest check
console.log(arrayIsEqual(array1, array1)); //true

Will React recompute the value given by the factory function if the reference to obj changes?

From what I know and understand, React uses shallow reference equality checks using Object.is. Relevant condition is emphasized.

Object.is() determines whether two values are the same value. Two values are the same if one of the following holds:

• both undefined
• both null
• both true or both false
• both strings of the same length with the same characters in the same order
• both the same object (meaning both values reference the same object in memory)
• both BigInts with the same numeric value
• both symbols that reference the same symbol value
• both numbers and
  • both +0
  • both -0
  • both NaN
  • or both non-zero, not NaN, and have the same value

Consider the following code:

function App() {
  const [c, setC] = React.useState(0);
  const [obj, setObj] = React.useState({ prop: 10 });

  const forceRender = () => setC((c) => c + 1);

  const memoizedValue1 = React.useMemo(() => {
    console.log("`obj` dependency updated, recomputing value.");
    return obj.prop;
  }, [obj]);

  const memoizedValue2 = React.useMemo(() => {
    console.log("`obj.prop` dependency updated, recomputing value.");
    return obj.prop;
  }, [obj.prop]);

  const immutableHandler = () => {
    setObj(() => {
      console.log("Immutable update returns new object.");
      return { prop: 42 };
    });
    forceRender();
  };

  const mutableHandler = () => {
    setObj((obj) => {
      console.log("Mutable update returns same object with updated property.");
      obj.prop = 13; // DON'T DO THIS IN REAL CODE, IT'S A MUTATION!!
      return obj;
    });
    forceRender();
  };

  return (
    <div className="App">
        <div>memoizedValue1: {memoizedValue1} - memoizedValue2: {memoizedValue2}</div>
      <button type="button" onClick={immutableHandler}>
        Immutable Update
      </button>
      <button type="button" onClick={mutableHandler}>
        Mutable Update
      </button>
      <button type="button" onClick={() => setObj({ prop: 10 })}>
        Reset
      </button>
    </div>
  );
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root" />

memoizedValue1 is using the root obj object value as a dependency while memoizedValue2 uses the nested obj.prop object value as a dependency. One button updates and returns an entirely new obj object reference while the other only updates the obj.prop value reference. When the entire object is replaced and is a new reference notice that both useMemo hook callbacks are invoked, but when only updating the nested prop value that only the second useMemo hook callback is invoked.

Conclusion

React doesn't look more deeply at nested properties when comparing React hook dependencies.