NumberTicker and ts strict mode

[manjime83]

Describe the bug

The useEffect in /docs/components/number-ticker throws a TypeScript/ESLint error: "Not all code paths return a value". This occurs because the cleanup function (return () => clearTimeout(timer)) only executes inside the if (isInView) block, leaving the else path without an explicit return.

Affected component/components

NumberTicker

How to reproduce

Current code:
useEffect(() => {
if (isInView) {
const timer = setTimeout(() => {
motionValue.set(direction === "down" ? startValue : value);
}, delay * 1000);
return () => clearTimeout(timer); // Linter flags: not all paths return value
}
// No return here triggers ESLint consistent-return rule violation
}, [motionValue, isInView, delay, value, direction, startValue]);

The useEffect should pass linting while maintaining identical runtime behavior—skip animation setup when !isInView, and provide cleanup for the timer when applicable.

Codesandbox/StackBlitz link

No response

Logs

System Info

- React version: [18.x]
- TypeScript: enabled with strict mode
- ESLint: consistent-return rule active
- Reproduction: Create new MagicUI project, enable TS/ESLint, use NumberTicker component

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[arun4374]

Thanks for sharing this.

Just to clarify, this isn’t a runtime bug — the component works fine in the browser.
The issue is triggered by ESLint’s consistent-return rule in strict TypeScript setups.

In the current useEffect, a cleanup function is returned only when isInView === true,
which causes ESLint to report “Not all code paths return a value”.

A small change like returning early when !isInView keeps the same runtime behavior
while making the example lint-safe.