'Eslint exhaustive deps warning in useEffect

In the useEffect of the component below, I face an ESLint exhaustive-deps warning :

ESlint is telling me that I need to include selectedJar as a dependency, but when I do that the charts load quickly then they all disappear.

I can go on with my development because everything works, but I assume, based on the message from ESlint, that I am doing something wrong.

Can anyone advise me on how this code should actually look?


const Stats: Page = () => {
  const [selectedJar, setSelectedJar] = useState("example"); 
  const [jarData, setJarData] = useState<JarChartData>({} as JarChartData);
  const router = useRouter();
  const jar: string = typeof(router.query.jar) === "string" ? router.query.jar : "";
  
  useEffect(() => {
    const getData = async (): Promise<void> => {
      setSelectedJar(jar);
      const jarData: JarChartData = await getJarData(selectedJar);
      setJarData(jarData);
    }
    getData();
  }, [jar]);
  return (
    <>
      something dope
    </>
  )


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source