No Cascading Set State

Error

small-rules/no-cascading-set-state

Disallow effect hooks with many cascading state updates.

Diagnostic Messages

cascadingSetState

{{count}} setState calls in a single useEffect — consider using useReducer or deriving state

Configuration

This rule does not accept options.

{
  "jsPlugins": [
    "@pobammer-ts/small-rules"
  ],
  "rules": {
    "small-rules/no-cascading-set-state": "error"
  }
}

Examples

Multiple state updates in effect

import { useEffect, useState } from "@rbxts/react";

function Component() {
  const [firstValue, setFirstValue] = useState(0);
  const [secondValue, setSecondValue] = useState(0);
  const [thirdValue, setThirdValue] = useState(0);

  useEffect(() => {
    setFirstValue(firstValue + 1);
    setSecondValue(secondValue + 1);
    setThirdValue(thirdValue + 1);
  }, [firstValue, secondValue, thirdValue]);
}

Two state updates in effect

import { useEffect, useState } from "@rbxts/react";

function Component() {
  const [firstValue, setFirstValue] = useState(0);
  const [secondValue, setSecondValue] = useState(0);

  useEffect(() => {
    setFirstValue(firstValue + 1);
    setSecondValue(secondValue + 1);
  }, [firstValue, secondValue]);
}

Related Rules

Prefer Use ReducerRelatedCascading setState in effects is the runtime symptom prefer-use-reducer is meant to prevent.No Useless Use EffectRelatedBoth attack effect bodies that manage state as a sequence of imperative updates.