Use set function from custom hooks inside useEffect - reactjs

Question

I created a custom hook that maintain state in a certain type based on data in a different type like this:
import { useState, useRef, Dispatch } from 'react';
function useBackedState<TData, TBacking>(initialData: TBacking, converter: (backing: TBacking) => TData):
[
state: TData,
getBackingData: () => TBacking,
setData: Dispatch<TBacking>
] {
const ref = useRef(initialData);
const [state, setState] = useState(converter(initialData));
const setData: Dispatch<TBacking> = (val: TBacking) => {
ref.current = val;
setState(converter(val));
};
return [
state,
() => ref.current,
setData
];
}
export default useBackedState;
However, I have problems when I call on setData inside a useEffect hook.
For example, I tested it in this component:
import { useState } from 'react';
import useBackedState from './hooks/useBackedState';
function Component() {
const [data, backing, setData] = useBackedState<string, string[]>(
[],
(arr) => arr.join('');
);
const [somethingElse, setSomethingElse] = useState('a');
useEffect(() => {
setSomethingElse('b');
setData(['h', 'e', 'l', 'l', 'o']);
}, []);
return (
<div>
<p>{data}</p>
... some more rendering
</div>
);
}
I want useEffect to only run once at the start, so I provided an empty array of dependencies. However, although the app works, I get this warning:
React Hook useEffect has a missing dependency: 'setData'. Either
include it or remove the dependency array
If I do add setData as a dependency, the entire app goes into an infinite loop of refresh and I get this error:
Warning: Can't perform a React state update on an unmounted component.
This is a no-op, but it indicates a memory leak in your application.
To fix, cancel all subscriptions and asynchronous tasks in a useEffect
cleanup function.
I am not required to add the setSomethingElse as a dependency to useEffect. Why am I required to add setData?

Answer 1

All state and prop values that get referenced inside a hook should have that value in the dependency array - so the argument goes. If you agree and wish to satisfy the linter, here, it's easy - just memoize the functions returned from the custom hook (which is often a good practice anyway, especially when exhaustive-deps is being used).
const setData: Dispatch<TBacking> = useCallback((val: TBacking) => {
ref.current = val;
setState(converter(val));
}, [setState, converter]);
I am not required to add the setSomethingElse as a dependency to useEffect
The linter can see that setSomethingElse comes directly from a state setter function declared in the same component, and thus definitely won't ever change, and so doesn't need to be in the dependency array.