No Initialize State

Suggestion

small-rules/no-initialize-state

Disallow initializing state in an effect.

Rationale

Ported from eslint-plugin-react-you-might-not-need-an-effect/no-initialize-state. The upstream rule points at TkDodo’s post on avoiding hydration mismatches with useSyncExternalStore, which is a web-React problem.

It’s a mount-only effect that synchronously sets state. You already have a place for initial values: the useState() initializer. An effect that sets state means the first frame renders without the value. Then the effect runs and it pops in a frame later. On the web that’s also a hydration mismatch, which is what the upstream link is about. roblox-ts has no server render, so that half doesn’t apply here, but the initial-value problem is the same.

The one real case is async init. You can’t await in an initializer, and the rule steps back when the state write happens inside an async callback. That’s the exception, not the rule.

Diagnostic Messages

avoidInitializingState

Avoid initializing state in an effect. Instead, initialize "{{state}}"'s "useState()" with "{{arguments}}". For SSR hydration, prefer "useSyncExternalStore".

Configuration

This rule accepts one options object after the severity.

environmentOptional

The React environment: 'roblox-ts' uses @rbxts/react, 'standard' uses react.

Type

"roblox-ts" | "standard"

Default

roblox-ts

.oxlintrc.json

{
  "jsPlugins": [
    "@pobammer-ts/small-rules"
  ],
  "rules": {
    "small-rules/no-initialize-state": [
      "error",
      {
        "environment": "roblox-ts"
      }
    ]
  }
}

oxlint.config.ts

import { defineConfig } from "oxlint";

export default defineConfig({
  jsPlugins: ["@pobammer-ts/small-rules"],
  rules: {
    "small-rules/no-initialize-state": [
      "error",
      {
        environment: "roblox-ts",
      },
    ],
  },
});

Examples

State initialized by an effect

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

export function MyComponent(): React.Element {
  const [state, setState] = useState<string | undefined>();

  useEffect(() => {
    setState("Hello");
  }, []);

  return <textlabel Text={state} />;
}

State initialized from an async source

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

declare const game: {
  readonly GetService: (service: string) => { readonly GetAsync: (url: string) => Promise<string> };
};

export function MyComponent(): React.Element {
  const [state, setState] = useState<string | undefined>();

  useEffect(() => {
    void (async (): Promise<void> => {
      const response = await game.GetService("HttpService").GetAsync("https://api.example.com/data");
      setState(response);
    })();
  }, []);

  return <textlabel Text={state} />;
}

Related Rules

RelatedNo Adjust State On Prop Changeno-adjust-state-on-prop-change and no-initialize-state are siblings: both flag state writes in effects, one triggered by prop changes, the other by mount.