Demonstrate false-positive eslint(react-hooks/exhaustive-deps) rule

hookProblem.js

import useID from './useID';

// Custom effect for manage id from ui or URL
const [id, setId] = useID(data);

useEffect(() => {
  setId(data.id);
}, [data, setId]); // <- As the function changes after we use it, it creates an infinite loop

useID.js

import { useEffect, useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {

  case 'setFromUI':
    urlManager.setUrlData({ id: action.id });
    return action.id

  case 'setFromUrl':
    return action.id

  default:
    return action.id;

  }
}

export default function useID(data) {
  const [currentID, dispatch] = useReducer(reducer, []);
  const setIDFromUrl = id => dispatch({ type: 'setFromUrl', id });
  const setIDFromUI = id => dispatch({ type: 'setFromUI', id });

  useEffect(() => {
    function handler(newId) {
      setIDFromUrl(newId);
    }
      
    return urlManager.subscribe('id', handler);
  }, [data]);

  return [currentID, setIDFromUI];
}