What if referential stability became part of TypeScript’s type system?
The stableref concept uses branded Stable types, strict props and wrapper hooks to check stable references at compile time.
The biggest pain when working with React.memo, useCallback or useMemo is that their computations break quietly and invisibly. All it takes is passing an inline array [1, 2, 3] or an ordinary arrow function as a prop: reference identity breaks, memoization stops working, and the component starts rendering every time its parent so much as sneezes.
Meanwhile, TypeScript stays silent: from the standard type system’s perspective, an inline array is no different from an array wrapped in useMemo.
Jovi DeCroock asked himself: “What if we encoded the framework’s referential stability rules directly into types?” And released a neat conceptual library called stableref.
How it works:
- Branded Types: It introduces branded types such as
Stable<T>, marking a reference as guaranteed to remain stable between renders. - Strict prop typing: If a memoized component requires
Stable<Item[]>, you can’t pass it an ordinary array[1, 2]. TypeScript immediately throws a Type Error strictly at compile time. - A runtime without surprises: No more hunting down the causes of constant rerenders with the DevTools profiler. Unstable reference errors are highlighted right in your IDE as you write the code.
- Wrapper hooks: The library’s custom
useCallbackanduseMemohooks return exactly theStablereferences the component requests.
Essentially, it’s an attempt to shift memoization checks from runtime to static type checking.
Read the author’s detailed explanation
What do you think of the idea? Would you bring such strict reference checks into your TS projects, or will React Compiler / framework compilation eventually solve this pain completely?