[WP] 17.02.2023 | useEffect

 

fig 1.1 three variants of useEffect() hook

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

Another post to sum up things that I have done. Currently I’m working on side effects handling in react. Because of characteristics of React it offers kinda sophisticated way to solve side effects in comparison to Vanilla JS ways. useEffect(()=>{//useEffect logic return()=>{} //clean-up function,[]) is a hook that is responsible for that role. So far i realized that useEffects come in several variants. It may trigger on single componentDidMount event , event which is repeated on each re-render of the component or event which is repeated only in case specified pieces of state change.

Dependency array useEffect(cb, [ ]) is a location of effect dependencies. No dependencies defined – effect is done once, any deps – effect runs on change of given state and no deps array defined – effect runs on each re-render. If there are any pieces of state used within useEffect cb and not specified in deps array react will give lint warrning (exhaustive dependencies) it may be silenced with //eslint-disable-next-line but much better solution is to specify state pieces inside useEffect’s hook dependencies array. Otherwise those state will become stale(not up-to-date).

One very important thing when adding even listeners is to remove them when they are no longer required. This process is called clean-up. Basically whe clean up the memory from unused listerens. Same process is done by JS garbage collector for unreferenced variables. In useEffect hook clean-up function is passed as a return of main useEffect hook callback. Returned fuction will be called just before componentDidUnmount event. Above mentioned is connected with subscription(on going long runnuing process) and subscribe/unsubscribe actions. Conditional rendering (condition && <Component/>) destroy component instances but all event listeners need to be unsubscribed with clean-up function. The location of cleanup function(main cb return) gives it access to main cb function lexical context. With no cleanup applied event listeners may stack with each rerender unnecesarily occupy browsers memory and in edge case cause it to overflow.

There were several interesting exercises for practice this conceptions. Two were basic examples with window.addEventListener(‚eventName’, callback) and window.removeEventListener(‚eventName’, callback)(symmetry) for onmouseover and onresize (viewport) events. One of the excercises(with jumping out toast like ghost icon) was using a intersectionObserver API. It lets user track the events of root element(by default devices viewport) intersecting with target element. At first it is instantiated with cb triggered when event occurs and options object specifing{root, rootMargin, threshold} (let observer = new intersectionObserver(cb, options ). Secondly element to be observed need to be targeted(observer.observe(elements reference(querySelector/useRef)). Callback function receives intersectionObserver entry objects([entries]).

Humble student

g-marcin