Skip to content

No Useless Use Effect

Suggestion
small-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.

Diagnostic Messages

adjustState
This effect adjusts state when a prop changes. Adjust the state directly during rendering or restructure to avoid this need.
derivedState
This effect only derives state from properties or state. Compute the value during rendering instead of useEffect.
duplicateDeps
Multiple effects have identical dependency arrays. Combine them into a single effect for better performance.
effectChain
This effect is part of a chain of effects that only derive state from other effects. Consolidate the logic into event handlers or compute during rendering.
emptyEffect
This effect has an empty body and should be removed.
eventFlag
This effect only reacts to a state flag. Call the side effect directly in the event handler instead of toggling state.
eventSpecificLogic
This effect runs event-specific logic based on state. Move this logic to the event handler that triggers the state change.
externalStore
This effect subscribes to an external store and syncs to state. Use `useSyncExternalStore` instead.
initializeState
This effect initializes state with a constant value. Pass the value as the useState initializer instead.
logOnly
This effect only contains console.log calls. Remove it (debug leftover) or move the logging to an event handler.
mixedDerivedState
This effect contains state setter calls that derive values from props or state mixed with other operations. Extract the setter calls and compute values during rendering.
notifyParent
This effect only notifies a parent via a property callback. Call the callback in the event handler instead of useEffect.
passRefToParent
This effect passes a ref to a parent callback. Use `forwardRef` or `useImperativeHandle` instead.
resetState
This effect resets state when a prop changes. Pass a `key` prop to the component instead to reset all state automatically.

Configuration

This rule accepts one options object after the severity.

environmentOptional

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

hooksOptional

Effect hook names checked for avoidable effect patterns.

propertyCallbackPrefixesOptional

Property name prefixes treated as event callback props.

refHooksOptional

Ref hook names that return mutable ref objects.

reportAdjustStateOptional

Report effects that only adjust state after render.

reportDerivedStateOptional

Report effects that copy derived values into state.

reportDuplicateDepsOptional

Report duplicate entries in effect dependency arrays.

reportEffectChainOptional

Report effects that only trigger another effect through state.

reportEmptyEffectOptional

Report effects whose callback body is empty.

reportEventFlagOptional

Report effects that react to event flags stored in state.

reportEventSpecificLogicOptional

Report effects that move event-specific logic out of the event callback.

reportExternalStoreOptional

Report effects that mirror external store values into local state.

reportInitializeStateOptional

Report effects that only initialize state after mount.

reportLogOnlyOptional

Report effects that only log values.

reportMixedDerivedStateOptional

Report effects that mix derived-state updates with other work.

reportNotifyParentOptional

Report effects that only notify a parent through a callback prop.

reportPassRefToParentOptional

Report effects that only pass a ref value to a parent callback.

reportResetStateOptional

Report effects that reset local state when inputs change.

stateHooksOptional

State hook names that return [value, setter] pairs.

{
"jsPlugins": [
"@pobammer-ts/small-rules"
],
"rules": {
"small-rules/no-useless-use-effect": [
"error",
{
"environment": "roblox-ts",
"hooks": [
"useEffect",
"useLayoutEffect",
"useInsertionEffect"
],
"propertyCallbackPrefixes": [
"on"
],
"refHooks": [
"useRef"
],
"reportAdjustState": true,
"reportDerivedState": true,
"reportDuplicateDeps": true,
"reportEffectChain": true,
"reportEmptyEffect": true,
"reportEventFlag": true,
"reportEventSpecificLogic": true,
"reportExternalStore": true,
"reportInitializeState": true,
"reportLogOnly": true,
"reportMixedDerivedState": true,
"reportNotifyParent": true,
"reportPassRefToParent": true,
"reportResetState": true,
"stateHooks": [
"useState",
"useReducer"
]
}
]
}
}

Examples

Derived state inside effect
import { useEffect, useState } from "@rbxts/react";
function Component(properties) {
const [count, setCount] = useState(0);
useEffect(() => {
setCount(properties.initialCount);
}, [properties.initialCount]);
}
Effect synchronizes external system
import { useEffect } from "@rbxts/react";
function Component() {
useEffect(() => {
trackPageView("/home");
}, []);
}