By default, when your component’s state or props changes, your component will re-render. Recoil is a state management, so it will not do what usrRef did in your program.
It may sound horrible that 100+ tabs are re-rendered for a change. However, with React’s diff algorithm, the actual cost may not be high for many trivial re-renders.
It may make sense for your use case to use an impure function with useRef. It is an interesting solution. Thanks for sharing!