Typically we use hooks like useState which are controlled in that they store data within state. Whenever data stored in state changes, the component is re-rendered.

In order to avoid re-rendering, we cannot store data in state - this is referred to as uncontrolled. the useRef hook allows us to do this by storing data separately from the state and avoiding re-renders

(a.k.a. HOCs) are functions which accept a component and returns another component

function exFun1( component1) {

   class HOC extends React.Component {
        [...]
        render(){
              <component1 />   //somewhere the HOC uses the original component
        }
   }
  
   return HOC

}

const newComponent = exFun1(originalComponent)
//used by invoking <newComponent />