Skip to content
small-rules

React Rules

Rules for React Luau components, hooks, and JSX patterns.Browse all 31 rules in this category.

Showing 31 rules

Ban React Fc

React Rules
ban-react-fc

Ban React.FC and similar component type annotations. Use explicit function declarations instead.

  • Problem

Memoized Effect Dependencies

React Rules
memoized-effect-dependencies

Flags effect dependencies that are not memoized. Unmemoized dependencies can cause unnecessary re-renders or infinite loops.

  • Problem

No Cascading Set State

React Rules
no-cascading-set-state

Disallow effect hooks with many cascading state updates.

  • Problem

No Giant Component

React Rules
no-giant-component

Report React components whose bodies exceed 300 lines.

  • Problem

No God Components

React Rules
no-god-components

Enforce React component size and complexity limits inspired by the 'Refactor God Component' checklist.

  • Problem

No Inline Property On Memo Component

React Rules
no-inline-property-on-memo-component

Prevent inline properties from being passed to memoized components.

  • Problem

No New Instance In Use Memo

React Rules
no-new-instance-in-use-memo

Disallow configured constructor calls (default: new Instance) inside React useMemo callbacks.

  • Problem

No Render Helper Functions

React Rules
no-render-helper-functions

Disallow non-component functions that return JSX or React elements.

  • Suggestion

No Static React Create Element

React Rules
no-static-react-create-element

Require JSX for static React.createElement calls.

  • Problem

No Underscore React Props

React Rules
no-underscore-react-props

Ban React property names that begin with an underscore in JSX.

  • Problem

No Unused Use Memo

React Rules
no-unused-use-memo

Disallow standalone useMemo calls that ignore the memoized value.

  • Problem

No Use Memo Simple Expression

React Rules
no-use-memo-simple-expression

Disallow useMemo for expressions that are already trivial to compute.

  • Problem

No Useless Use Effect

React Rules
no-useless-use-effect

Disallow empty effects, duplicate dependencies, effect chains, log-only effects, derived state, external-store state sync, state initialization, reset effects, parent notifications, parent ref callbacks, and event side effects routed through state.

  • Suggestion

No Useless Use Memo

React Rules
no-useless-use-memo

Disallow useMemo calls that only wrap values static enough to live at module scope.

  • Suggestion

No Useless Use Spring

React Rules
no-useless-use-spring

Disallow useSpring hooks whose config and dependencies are entirely static

  • Suggestion

Prefer Constant Dispatch

React Rules
prefer-constant-dispatch

Disallow inline useReducer action objects that could be module-level constants.

  • Suggestion
  • Editor suggestions

Prefer Context Stack

React Rules
prefer-context-stack

Prefer a local ContextStack component over directly nesting multiple context providers.

  • Suggestion
  • Automatic fix

Prefer Hoisted Jsx Elements

React Rules
prefer-hoisted-jsx-elements

Prefer extracting static Roblox JSX intrinsic elements to module-level constants.

  • Suggestion

Prefer Hoisted Jsx Object Properties

React Rules
prefer-hoisted-jsx-object-properties

Prefer extracting inline JSX object props to module-level constants when the entire object is statically hoistable.

  • Suggestion

Prefer Local Portal Component

React Rules
prefer-local-portal-component

Prefer a local Portal component over direct createPortal calls when the project already defines one.

  • Suggestion
  • Automatic fix

Prefer Padding Components

React Rules
prefer-padding-components

Prefer local EqualPadding and DirectionalPadding components over matching <uipadding /> declarations.

  • Suggestion
  • Automatic fix

Prefer Ternary Conditional Rendering

React Rules
prefer-ternary-conditional-rendering

Prefer ternary expressions over complementary JSX && branches.

  • Suggestion
  • Automatic fix

Prefer Use Reducer

React Rules
prefer-use-reducer

Suggest using useReducer for related state updates instead of multiple useState calls.

  • Problem

React Hooks Strict Return

React Rules
react-hooks-strict-return

Restrict React hooks to object returns or short tuples.

  • Suggestion

Require Named Effect Functions

React Rules
require-named-effect-functions

Enforce named effect functions for better debuggability. Prevents inline arrow functions in useEffect and similar hooks.

  • Problem

Require React Component Keys

React Rules
require-react-component-keys

Require keys on nested React JSX children, fragments, and configured iteration or memoization contexts.

  • Problem

Require React Display Names

React Rules
require-react-display-names

Require displayName on exported memo components and contexts.

  • Problem

Rerender Memo With Default Value

React Rules
rerender-memo-with-default-value

Prevent inline empty object and array defaults in component prop destructuring.

  • Problem

Strict Component Boundaries

React Rules
strict-component-boundaries

Prevent imports that reach into another component's nested modules.

  • Problem

Use Exhaustive Dependencies

React Rules
use-exhaustive-dependencies

Enforce exhaustive and correct dependency specification in React hooks to prevent stale closures and unnecessary re-renders

  • Problem
  • Automatic fix and editor suggestions

Use Hook At Top Level

React Rules
use-hook-at-top-level

Enforce that React hooks are only called at the top level of components or custom hooks, never conditionally or in nested functions

  • Problem