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?