useMemo

It is a react hook that lets you cache the calculation results between re-renders.

• Problem ⇒ React renders the component on every state change so if we are doing some heavy operation it will render the component with the whole operation on every small change also.
• Solution ⇒ Such type of issue can be solved with the help of memoization or useMemo.
• That means it caches the heavy operations calculations between every re-renders.

useCallback

It is a react hook that lets you cache a function definition between re-renders.

useRef

It is a react hook that lets you reference a value that’s not needed for rendering.

When you want a value in a variable in your component but you don’t want that value to re-render. You can tell about this by giving the difference between let, state, and ref variables.

• let ⇒ will not render the component but if you change its value using any function it will change its value but not update the UI, and also whenever the component re-render it will reset its value to which it was assigned.
• state ⇒ will render the component on every state change of variable or value change, and also updates the UI with every re-render also it stores the value and doesn’t reset it on re-render.
• ref ⇒ will not render the component but if you change its value using the function it will update the value behind the scene and store it, but will not update UI as it is not re-rendering the component. but once you re-render the component it will show you the updated value.