A Thoughtful Way To Use React’s useRef() Hook

Description

Summary

• In a React component, useState and useReducer can cause your component to re-render each time there is a call to the update functions.
• Initially, the component initializes all variables to the default values, also stores all the state and refs to a unique store as defined by the React algorithm.
• When a new update is available for the component through an update to its props or state, React pulls the old value for states and refs from its store and re-initializes the state to the old value also applying an update to the states and refs that have an update.
• Storing values in refs solve the problem of frequent re-rendering but brought a new challenge of the component not being updated after a ref’s value has changed which can be solved by introducing a setForceUpdate state update function.