eslinter | Manual JavaScript Linting is a Bug

We are in the process of updating our dependencies. We recently updated spring-boot from 2.4.4 to 2.5.9.

Since then we cannot test a portion of our functionality locally. This involves custom domain passed using proxies. We have the following setup locally:

I would like it if my typescript compiler or eslinter raises an error if I use any builtin function or global variable without importing it explicitly. Can this be done and if so, how?

for example

I am trying to understand why the following useEffect is running in an infinite loop. I made the fetchSchedule helper function to call the getSchedule service (using Axios to query the API endpoint). Reason I did not define this function inside the useEffect hook is because I would like to alternatively also call it whenever the onStatus function is invoked (which toggles a Boolean PUT request on a separate endpoint).

The eslinter is requiring fetchSchedule be added to the array of dependencies, which seems to be triggering the infinite loop.

The way it should work is fetching the data from the database on first render, and then only each time either the value prop is updated or the onStatus button is toggled.

So far my research seems to point that this may have something to do with the way useEffect behaves with async functions and closures. I’m still trying to understand Hooks and evidently there’s something I’m not getting in my code…

My eslinter.json

I am running

I've seen a few questions regarding this, but I can't make any sense out of it.

I am using React hooks and functional components. In my functional component, I have some strange things happening that I cannot figure a way out of. In the useEffect, originally I did not have the return array to prevent an endless loop and was attempting to use rowData within the deleteClickedHandler but it is always empty. After some research said the way around this was to use the useRef, that seemed to work but invoked the ESLinter's anger which demanded to have rowData be in the array that causes re-renders for the useEffect. This causes the deleteClickedHandler to receive the data from rowDataRef.current but causes an endless loop.

The deleteClickedHandler is performing optimistic concurrency, changing the rowData state, and interacting with the api.

After several hours, I do not know how to fix this.

If I remove the rowData from the array that tells useEffect when to re-render, the delete handler works but does not re-render and since deleteClickedHandler is a handler, I cannot determine how to cause the re-render without an endless loop.

I am sure I am doing something stupid but cannot determine why rowData is not available in deleteClickedHandler - I know the handler is a form of a closure but rowData is state.

First time posting!

I'm using Typescript with React to make a small project. I'm having an issue with ESLint not recognizing that a prop variable with the type string[] would normally have a .map function because its an array.

App.tsx