0

Hello fellow developers out there,

I have this question which my colleagues don't seem to reach an agreement about.

Considering JS hoisting and that functions expressions are not called when the component mounts, it seems to be safe to assume we are not going to have any problems by declaring methods violating "used before it was defined".

But I wonder if is it safe to ignore lint's warnings about it and declare component's functions alphabetically or according to logic blocks or whatever...? Even though if a function declared first calls another one declared later?

For example (this is just a simplification of a large functional component with lots of functions where it would be really hard for another developer to get organized around all of it):

const SomeRandomFC = () => {

  // User logics
    const changeUser = id => {
    if (id !=== currentId) {
      getDatabase(id);
    }
    const getUser = id => ...

 // Database logics
   const getDatabase = user => [fetch logics];
   const updateDatabase = id => ... 

}

Thanks!

Анна
  • 1,248
  • 15
  • 26
  • Hi! Please read through [*What types of questions should I avoid asking?*](/help/dont-ask) and [*What topics can I ask about here?*](/help/on-topic). This question explicitly calls for opinion based answers. – T.J. Crowder Apr 27 '21 at 09:19
  • (Separately, it's impossible to read the code in the question with any degree of confidence. Where does `changeUser` end? `getUser`?) – T.J. Crowder Apr 27 '21 at 09:21
  • *"...and that funcions methods are not called when the component mounts..."* What are "functions methods"? What makes you sure they aren't called when the component mounts? That might be true if they're event handlers; it could easily not be true in other situations. In any case, they aren't methods. – T.J. Crowder Apr 27 '21 at 09:24
  • Hi @T.J. Crowder. Thanks for your answers on my question. I've psoted it to know if it is safe to ignore lint and avoid unexpected errors. But I understand your comments about the nature of the question, as it looks like I'm asking personal opinions. – Анна Apr 27 '21 at 09:28
  • 1
    Check this https://stackoverflow.com/questions/336859/var-functionname-function-vs-function-functionname – KALITA Apr 27 '21 at 09:36
  • The term is [**function** component](https://reactjs.org/docs/components-and-props.html) not **functional** component. Functional programming is something different. (It is possible for a function component to be functional, but only with certain restrictions, like not using hooks… and that isn't the meaning you have here). – Quentin Apr 27 '21 at 09:39
  • Im using the definition "React Function Component" and "React Function Component Methods" as stated by [Robin Wieruch](https://www.robinwieruch.de/react-function-component) – Анна Apr 27 '21 at 09:49

1 Answers1

6

Leaving opinion aside, let's say you have:

const a = () => {
    b();
};
// a(); // <== Would fail
const b = () => {
    // ...
};
a(); // <== Works

From a "does it work" perspective, the call at the end there is fine, because by the time that call occurs, b has been initialized. However, if you uncommented the first call to a above, it would fail because b hasn't been initialized yet.

You mentioned hoisting. Beware that since you're using function expressions assigned to constants instead of function declarations, only the declaration of the constant is hoisted, not the initialization of that constant. In contrast, if you have a function declaration, both the declaration of its binding and the initialization of that binding are hoisted:

function a() {
    b();
}
a(); // <== Works
function b() {
    // ...
}
a(); // <== Works

Note that the call that would have failed in the first example works in the second one.

(Please don't take this as a suggestion to use function declarations instead. It isn't. I'm just pointing out the difference in behavior.)

Whether you use constants with function expressions or function declarations, the order in which you lay out your functions is up to you and your team, provided you don't have a situation like the commented-out call to a in the first code block above.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • 1
    Yeah, I can see that. That's what I was looking for. Thanks for the answer and thanks for the clarification about the hoisting process. – Анна Apr 27 '21 at 09:52