A React Effect that only sets state from other values

Code longer than it needs to be: one of the ways AI coding agents bloat software, from lessloc's pattern catalog. lessloc catches it as simpler.

What makes a React Effect that only sets state from other values a bad practice?

The standard that calls it a bad practice: React docs: "You Might Not Need an Effect".

What does lessloc do about a React Effect that only sets state from other values?

lessloc catches it as simpler.

• simpler (tier 2): Brute-force code with a shorter idiom: == True, an if/else that returns the condition, an index loop that only reads xs[i], .filter(...).length > 0, a catch that only rethrows, a flag loop that is any(), a hand-built counter, an __init__ that @dataclass writes, a React Effect that only sets state. ruff and clippy add more.

Examples

Caught as simpler:

import { useEffect, useState } from "react";
export function Cart({ items }) {
  const [total, setTotal] = useState(0);
  useEffect(() => {
    setTotal(items.reduce((s, i) => s + i.price, 0));
  }, [items]);
  return <p>{total}</p>;
}

Written well:

import { useEffect, useState } from "react";
export function Theme() {
  const [theme, setTheme] = useState("light");
  useEffect(() => {
    setTheme(localStorage.getItem("theme") ?? "light");
  }, []);
  return <p>{theme}</p>;
}

Related patterns

The other patterns in Code longer than it needs to be:

• Brute-force idioms: lessloc catches it as simpler, built in for Python, JS/TS, Go, Rust, Java and C#. ruff (in every hook) and clippy (in ci) go deeper.
• Hand-built counters and flag loops: lessloc catches it as simpler.
• A catch that only rethrows: lessloc catches it as simpler.
• A promise wrapped in new Promise: lessloc catches it as simpler.
• Annotating types the compiler infers: lessloc catches it as simpler.
• Functions with many parameters (8 or more): lessloc catches it as long-params.
• Deep nesting: lessloc catches it as deep-nesting.
• Long functions: lessloc catches it as long-function.
• If-chains on literal values: lessloc catches it as if-chain.
• A file that keeps growing: lessloc catches it as swollen-file.
• Reformatting lines the task did not change: lessloc gives every session a rule against it and catches it as churn.
• Net growth past a budget: lessloc catches it as net-growth.
• Golfed code: lessloc catches it as clever and dense-lines.