getData dependency inside useEffect

[spalt08]

As a developer I expect getData function to be immutable, so I can use it as a dependency inside useEffect. However it seems like getData function is re-created on each render.

Simple example

function Component({ changingPropName }) {
  const { getData } = useVisitorData()
  
  useEffect(() => {
    console.log('effect triggered', getData)
  }, [getData])

  return <div>{changingPropName}</div>
}

function Emulate() {
  const [counter, setCounter] = useState(1);

  useEffect(() => {
    setInterval(() => setCounter((state) => state + 1), 1000)
  }, [setCounter])

  return <Component changingPropName={counter} />
}

ReactDOM.render(<Emulate />, document.body)

[spalt08]

Workaround I am using:

// eslint-disable-next-line react-hooks/exhaustive-deps
const getDataMemo = useMemo(() => getData, [])