Broken useEffect Hooks Due to Missing Dependencies

[clicktodev]

Several components in the project contain useEffect hooks that are missing required dependencies in their dependency arrays. This can lead to unpredictable behavior, stale closures, and bugs that are hard to trace.

Examples:

  useEffect(() => {
    setDescription(server?.description || "");
    setTab(server?.endpoint ? TAB_ENDPOINT : TAB_SIMPLE);
    setIp(server?.ip || "");
    setVersion(server?.version ?? getDefaultVersion());
    setEndpoint(server?.endpoint || "");
  }, [server, versions]); // React Hook useEffect has a missing dependency: 'getDefaultVersion'. Either include it or remove the dependency array

Also run npm run lint and you'll get a bunch useEffect dep warnings

Why This Matters:

• React relies on the dependency array to determine when to re-run the effect.
• Omitting dependencies can cause effects to run with outdated values.
• This violates the [Rules of Hooks](https://reactjs.org/docs/hooks-rules.html) and may trigger warnings in strict mode or linters like eslint-plugin-react-hooks.

Suggested Fixes:

• Audit all useEffect hooks and ensure dependency arrays include all referenced variables.
• Consider enabling react-hooks/exhaustive-deps in ESLint to catch these automatically.
• Refactor effects to avoid unnecessary re-renders or extract logic into memoized callbacks if needed.

Steps to Reproduce:

1. Navigate to any component using useEffect with an empty dependency array.
2. Modify a prop or state used inside the effect.
3. Observe that the effect does not re-run as expected.

#27 should be merged first before this is addressed

[yungcomputerchair]

I'm a little confused on why this matters (and why the linter even cares).
The missing dependency in the example you showed (getDefaultVersion) is a static function; i.e. it will never change. So in this example, there is no weird or unexpected behavior.
Could you elaborate on why this is so important for variables that we know for a fact will not change? I believe all of the useEffect hooks in this project already have all the appropriate dependencies declared.

[clicktodev]

• there are currently 14 useEffects that have missing dependencies, u can enable the rule again in eslint config and run the lint command
• getDefaultVersion exists outside the useEffect, which means getDefaultVersion can possibly get out of sync

The safest approach would be to move the default version logic directly into the useEffect or use useMemo to memoize the default version

const defaultVersion = useMemo(() => {
  if (versions.length > 0) {
    return versions[0].uuid;
  }
  return "";
}, [versions]);

useEffect(() => {
  setDescription(server?.description || "");
  setTab(server?.endpoint ? TAB_ENDPOINT : TAB_SIMPLE);
  setIp(server?.ip || "");
  setVersion(server?.version ?? defaultVersion);
  setEndpoint(server?.endpoint || "");
}, [server, versions, defaultVersion]);

Or move the logic inline:

useEffect(() => {
  const defaultVersion = versions.length > 0 ? versions[0].uuid : "";
  setDescription(server?.description || "");
  setTab(server?.endpoint ? TAB_ENDPOINT : TAB_SIMPLE);
  setIp(server?.ip || "");
  setVersion(server?.version ?? defaultVersion);
  setEndpoint(server?.endpoint || "");
}, [server, versions]);

[yungcomputerchair]

Can you explain to me concretely what effect the change in the example you mentioned would have on the behavior in the launcher? i.e. what bug would this fix? Or is this just about silencing the linter?

[clicktodev]

The goal isn’t just to silence the linter, the warnings exist because React’s hook model relies on dependency tracking to guarantee consistent behavior.

Even if a function seems static today, React and the rules-of-hooks linter can’t assume that. Missing dependencies create situations where effects run with stale values, or fail to re-run when something does change later. These issues often don’t show up immediately, but they become extremely hard to debug once the codebase grows or logic shifts.

In this specific case, getDefaultVersion may not change now, but because it’s defined outside the effect, React treats it as a potentially dynamic reference. Including it (or inlining/memoizing the logic) ensures the effect always reflects the actual values it depends on. That’s why the rule flags it, not because it’s nitpicking, but because it’s enforcing the guarantees that make hooks predictable.

So the fix isn’t about cosmetics; it’s about keeping the behavior correct and future‑proof. The warnings are there for a reason, and following them avoids subtle bugs that only surface much later.