Automatically determine React component name in useSubscription to avoid manual prop

[flexsurfer]

Problem

Currently, the useSubscription hook requires explicitly passing the component name as a second argument:

const visibleTodos = useSubscription<Todo[]>([SUB_IDS.VISIBLE_TODOS], 'VisibleTodos');

This approach is redundant and error-prone, especially when renaming components or copy-pasting code. We'd like to eliminate the need to pass this name manually.

---

Goals

• Automatically infer the component name inside useSubscription
• Reduce boilerplate and chance of human error
• Keep the manual name as an optional override (fallback)

---

Proposed Solutions

1. Stack Trace Inspection

   • Use new Error().stack to infer the calling function/component name.
   • Pros: No changes needed to API.
   • Cons: Fragile across environments and minified builds.

2. React DevTools Integration

   • Use useDebugValue to help with development/debugging without requiring a manual name.
   • Note: Only improves developer tooling; doesn’t help internally.

3. Higher-Order Hook or Wrapper

   • Wrap useSubscription in a factory that injects the name (e.g. via function naming).
   • May require project-wide convention or transformation.

4. Build-Time Injection (Babel Macro or Vite Plugin)

   • Automatically insert component name at compile time using tooling.
   • Pros: Cleanest runtime.
   • Cons: Adds build tooling complexity.

---

Example (ideal usage)

const visibleTodos = useSubscription<Todo[]>([SUB_IDS.VISIBLE_TODOS]);
// No need to pass 'VisibleTodos' manually

---

Notes

We should carefully evaluate runtime performance and browser compatibility if using stack traces, or consider a tooling-based solution for production stability.