4 ms·
In the few cases I've used them, I've liked Hooks. I just have one big pet peeve with them. Everyone seems to write hooks in Least Significant Function First
by fpgaminer 7y ago
In the few cases I've used them, I've liked Hooks. I just have one big pet peeve with them. Everyone seems to write hooks in Least Significant Function First coding style. This is where you define dependent functions before the code/functions that call them. A short example:
function Hello() {
// other stuff
const callback1 = () => {
// do stuff
}
// other callbacks, effects, etc
return <button onClick={callback1}>{label}</button>;
}
See how the callback functions, and everything else, is defined before the "rendering" part of the function? Compared to, say:
function Hello() {
const render = () => <button onClick={callback1}>{label}</button>;
const callback1 = () => {
// do stuff
}
// other callbacks, effects, etc
return render();
}
That uses the Most Significant Function First approach, where the higher-order function (render) is defined first, and the functions it depends on are defined after them.
That latter example, AFAIK, compiles fine (filling in the elided etcs, of course).
To me, MSFF reads better. The higher order function being defined first gives the reader a lay of the land. They provide the highest overview of what the module as a whole does. The functions that follow drill down into increasingly finer details.
LSFF is backwards, forcing the reader to understand the finer details of a module without having any clue about their context or the overarching goal until the very end of the code.
React specifically, as a reader, I want to know first "What are we rendering?" Only then do I want to then know where the data that goes into that render comes from, the processing of that data, and what user interactions there may be.
I see LSFF a lot, especially in React code. Maybe it's just a personal preference, but I just feel like most coders are jumping straight to the "render" part of the code anyway, before looking at the rest of the module. So why write it at the bottom? Why not write the code the way it should be understood?
- ArchReaper 7y agoI'm not sure I follow your question. It's Javascript. Code goes from top to bottom. You can't write: function doThing(target) { console.log(myVar); const myVar = target.prop; } Because that's invalid Javascript. React Hooks are just functions that return markup. If your goal is simply to see what it renders first, that's fine, you simply need to look at what the function returns. I disagree with your assertion that LSFF is 'backwards' - it is simply not what you are used to. MSFF could definitely be argued for class-based components, but it's simply not an option for hook-based components.
- Izkata 7y agoThey didn't write that, they wrote this: function doThing(target) { function run() { console.log(myVar); } const myVar = target.prop; run(); } The console.log's evaluation is delayed, so it's totally valid.
- barryhoodlum 7y agoI think it's just because that style isn't widespread in JS in general? I don't think it's anything to do with hooks or React particularly.