Enforce the no-useEffect rule when writing or reviewing React code. ACTIVATE when writing React components, refactoring existing useEffect calls, reviewing PRs with useEffect, or when an agent adds useEffect "just in case." Provides the five replacement patterns and the useMountEffect escape hatch.
Instrucciones de origen · Vista previa de solo lectura
name
no-use-effect
description
Enforce the no-useEffect rule when writing or reviewing React code. ACTIVATE when writing React components, refactoring existing useEffect calls, reviewing PRs with useEffect, or when an agent adds useEffect "just in case." Provides the five replacement patterns and the useMountEffect escape hatch.
No useEffect
Never call useEffect directly. Use derived state, event handlers, data-fetching libraries, or useMountEffect instead.
Quick Reference
Lint rule: no-restricted-syntax (configured to ban useEffect)
Smell test: Your effect does fetch(...) and then setState(...), or you are re-implementing caching, retries, cancellation, or stale handling.
Rule 3: Event handlers, not effects
If a user clicks a button, do the work in the handler.
// BAD: Effect as an action relay
function LikeButton() {
const [liked, setLiked] = useState(false);
useEffect(() => {
if (liked) {
postLike();
setLiked(false);
}
}, [liked]);
return <button onClick={() => setLiked(true)}>Like</button>;
}
// GOOD: Direct event-driven action
function LikeButton() {
return <button onClick={() => postLike()}>Like</button>;
}
Smell test: State is used as a flag so an effect can do the real action, or you are building "set flag -> effect runs -> reset flag" mechanics.
Rule 4: useMountEffect for one-time external sync
Good uses: DOM integration (focus, scroll), third-party widget lifecycles, browser API subscriptions.
// BAD: Guard inside effect
function VideoPlayer({ isLoading }) {
useEffect(() => {
if (!isLoading) playVideo();
}, [isLoading]);
}
// GOOD: Mount only when preconditions are met
function VideoPlayerWrapper({ isLoading }) {
if (isLoading) return <LoadingScreen />;
return <VideoPlayer />;
}
function VideoPlayer() {
useMountEffect(() => playVideo());
}
Use useMountEffect for stable dependencies (singletons, refs, context values that never change):
// BAD: useEffect with dependency that never changes
useEffect(() => {
connectionManager.on('connected', handleConnect);
return () => connectionManager.off('connected', handleConnect);
}, [connectionManager]); // connectionManager is a singleton from context
// GOOD: useMountEffect for stable dependencies
useMountEffect(() => {
connectionManager.on('connected', handleConnect);
return () => connectionManager.off('connected', handleConnect);
});
Smell test: You are synchronizing with an external system, and the behavior is naturally "setup on mount, cleanup on unmount."
Rule 5: Reset with key, not dependency choreography
Smell test: You are writing an effect whose only job is to reset local state when an ID/prop changes, or you want the component to behave like a brand-new instance for each entity.
Component Structure Convention
Computed values come after hooks and local state, never via useEffect:
