[WP] 16.02.2023 | useRef

 

fig 1.1 useRef hook signature

-----------------------------------------------------------------------

Looking back on a coworking session held together with a bunch of my friends today I have one observation. It is a great chance to improve your communication skills, review your beliefs about variety of things and get your job done. Teamwork if balanced and performed in favourable environment is potential.

I started to learn about side effects in react. At first short revision of useRef hook. useRef hook let us create a reference object with current property and assign it to a variable. The main reason of useRef hook existence is to refer DOM objects. It is done by assigning useRefVariable to ref property of html tag in jsx markup.(<input ref={useRefVariable}). The element may be accessed afterwards by calling useRefVariable.current property. Initial value is set to null.

Side effects set contains fields such as: 1.Making network requests, 2. Managing timeouts/intervals, 3. Reading and writing in LocalStorage, 4. Listening for global events. One of the course exercise contained methods for handling audio/video file. <audiofile>.play() <audiofile>.pause(). Another treated about using window.localStorage.setItem(„key”, value), window.localStorage.getItem(key). Note that all values are stored inside a local storage as a string and strings only(stringified JSON). Parsing an object retreived from local storage with getItem method need to be parsed(JSON.parse) before using inside a script. Current status of local storage can be accesed or deleted via browser devtools(application) tab.

Particular attetion was given to dependencies array. It is passed as second argument of useEffect() call. It is a place for pointing out all state pieces which changed should trigger call of callback function passed as a first argument of useEffect call(). if there are no dependencies stated and such state variable is used within useEffect cb body exhaustive-deps lint rule occurs. It may be silenced with //es-lint-disable-next-line but its a no no. Better keep exhaustive dependecies within dependencies array. Otherwise stateVariables used within useEffect call will become stale variables(not up-to-date). Whenever dependency array is not defined useEffect hook is called on each re-render. If empty array is passed useState cb is invoked just once(no dependencies).

It is expensive in terms of web app performance to call localstorage many times. To avoid calling localstorage methods on each re-render we can pass an arrow function to useState(()=>{…local storage call…}) hook default val. – initialize state variable. At the end of this word marathon i will put a kind reminder on that pretty much all elements in react are dynamically injected.

Edit:

Ref object with current property may be passed between components with React.forwardRef() method

Goodnight

g-marcin