React useRef Hook Explained with Examples

Too Long; Didn't Read

React's useRef hook is a perfect way to share the state between each render without causing a new render. It is not good practice to keep anything outside the component. Every render create its own scope and each scope has its own state. UseRef returns a mutable ref object whose current property is set to be updated each time the component re-rendering is re-rendered. The state is set after the component was rendered and set a new state after each render is rendered. It works, but it is not a good idea to keep state outside of component.