Advanced Frontend

Bird Whispers

Apparently, frontend devs cant name things normally. They always have to come up with weird names, for normal programming concepts that just confuse someone approaching the subject matter initially. I understand that these things probably have their own nuances and intricacies, but so does every programming language when it implements a certain concept or paradigm, we don’t always call it a random thing because a few intricate details differ, do we?

Hooks

Okay, you know, the normal React hooks being called hooks, kinda does make sense. It does deserve a different name, its kinda unique, and well suited to the name its been given I’d say. Hooks arent just normal functions, although they funnily are, but they are uniquely functions that hook into React, and in turn its ability to manipulate the DOM.

That what makes these special. The only functions that are supposed to deal with manipulating the DOM, atleast thats what I understand. And since they hook into the React lifecycle, they are able to mess with the HTML structure of the pages. Pretty cool.

But why did some guy isolating out his UI’s logic get to call his own functionality hooks. Thats so annoying. I’m talking about custom hooks. I might be overreacting on this, but why do people make stuff like useNotifications, yeah I get its kinda clean, but its literally just basic abstraction of isolating away the implementational details into its own package/library esque thing (ofcourse not here, since libraries and packages mean a seperate thing in this eco system), but thats all it does; abstracts away the complexities related to the notification bar, and exposes a clean API for you or your team to use. Why do we call these custom-hooks instead of something normal?

useMemo

This is literally a cache function btw. Thats it. Its literally a cache with a the input/props mapped to return the same component/function everytime the cache hits. Thats literally it, but instead people gave us a stupid name and months of a lack of tasalli, idk what thats called. Tasalli, is relief.. so uhm.. months of unease. I know how to use this, but I just felt unease, because it was just never made clear to me thats all this thing was. Also this is after I vaguely knew what memoization meant, I’d studied it in college.

useCallback

This is literally a function that doesnt get regenarated on every render and if you are passing this function down into components, this doesnt get passed down into your components as a new “object” in the TS/JS interpreter, it stays the same “object” and gets passed down, leading to your components not rerendering unless absolutely necessary. Helps also when your downstream functions or components are memoized, so this helps hit the cache due to its reference being unchanged.

I tried understanding this, apparently its only useful when used with a useMemo or a memo(). Why on earth is the DX not such that its kinda packaged with it anyway? Apparently it can also help with stale closures, so I wanted to explore what other possible usecase could this have other preventing stupid rerenders of cached components (because it does NOT prevent rerenders of children that use this as a callback function, unless they are memoized!).

The chat of me exploring this ended like this:

Lots of back and forth, exploring what the hell a stale closure was in this case, boo hoo big words, its just anything that takes stale values in which leads to side effects (like a useEffect rerendering, or a memoized component rerendering, way to go with trying to sound smarter than we are). I asked for a solid example of it, it gave me a damn useEffect example with no useCallback at all.