React Hook useEffect has a missing dependency

import { useState } from "@hookstate/core";
import { useEffect } from "react";

export default function App() {
  const state = useState("whatever");

  useEffect(() => {
    state.set("foobar");
  }, []);

  return (<></>);
}

Linter warning: React Hook useEffect has a missing dependency: 'state'. Either include it or remove the dependency array. (react-hooks/exhaustive-deps)

The reason I’m updating the state in the effect is because I’m fetching data and updating the state when it comes back. I just didn’t include that in the code above.

I don’t want to pass in state into the array because I don’t want it to re-render every time the state changes. Is there a way to do this without disabling the linting rule?

[avkonst]

It is React thing. You can ask the same question about any other variable, not necessary state variable. As far as I know you can disable a specific lint rule per line. You can also try the following:

import { useState } from "@hookstate/core";
import { useEffect } from "react";

export default function App() {
  const state = useState("whatever");
  const stateSetter = React.useMemo(state.set);

  useEffect(() => {
    stateSetter.current("foobar");
  }, [stateSetter]);

  return (<></>);
}

[avkonst]

“Is there a way to do this without disabling the linting rule?” as @TroyJoachim suggested, set the state when it is fetched. You can also check if hookstate’s built in support for async state would help in your case.