because React components are re-executed every time the component re-renders, you can easily end up with thousands of workers being created! It's essential to use useRef to avoid this problem by maintaining a reference to the worker that you've created.

Think of useRef as a useState that does not trigger a re-rendering of our component.

useRef(new Map()).current

The equivalent ways in functional components using Hooks:In a state variable: useState or useReducer. Updates in state variables will cause a re-render of the component.In a ref: Equivalent to instance variables in class components. Mutating the .current property won’t cause a re-render.

const isFirst = useRef(true)

You can also create your own custom hook that uses the useRef hook to keep track of if it's the first time the effect is being run, so that you can skip the first invocation.

The useRef creates an "instance variable" in functional component.

const useFocus = () => { const htmlElRef = useRef(null) const setFocus = () => {htmlElRef.current && htmlElRef.current.focus()} return [ setFocus, htmlElRef ] }