React: replace useState with useRef

 How to replace useState with useRef and be a winner

React depends on state to make your app dynamic. That is the core functionality of a front-end framework

When not to use React state

• non-react state is easier to work with. Updates to non-react state are synchronous — no need to put stuff that reads an updated value
  
  
• updating a non-react state doesn’t trigger a re-render.
  
  
• Not using react state helps avoid a problem I call render thrashing
  
  
• react state carries more semantics, and overusing it makes your app seem more complex.

Hooks API Reference – React

useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.