Javascript: in react/sort-comp rules: Why are user-defined methods preferred between other lifecycle methods and render?

[sagiavinash]

[ljharb]

render always goes last - it's like the return for a function. Where would you prefer user-defined methods to go?

[sagiavinash]

above lifecycle methods
why is it not preferred to have all react methods to be in one place?

[ljharb]

We follow the ordering from https://github.com/airbnb/javascript/tree/master/react#ordering, and don't have a strong opinion about it other than that there must be _an_ order.

Either way, "render" is a React method too, and must be last - so the only way to group React methods together would be "constructor, custom, lifecycle, render" - but then the very-important lifecycle methods are buried in the middle of the class body instead of being near the top.

[marcjkeppler]

@ljharb - Would it be possible to have the order be "constructor, lifecycle, render (render is part of the lifecycle, right?) and then custom/private?

I consider custom functions to be part of the "private" implementation of a component, but perhaps there are other use cases. Because of this, I'm less interested in the details of these functions and more interested in what is being rendered.

[ljharb]

The intention is for render to be last one, so you can jump to the bottom to see the important stuff.

[techird]

The intention is for render to be last one, so you can jump to the bottom to see the important stuff.

If the render method is the important staff, why it didn't comes the top position? Isn't it convenient if a component's render method is visible right after a component's code open?

In my option, the follow ordering is better:

1. optional static methods
2. constructor
3. getChildContext
4. render
5. optional render methods like renderNavigation() or renderProfilePicture()
6. LifeCycleMethods
7. clickHandlers or eventHandlers like onClickSubmit() or onChangeDescription()
8. getter methods for render like getSelectReason() or getFooterContent()

Because this is how the dependencies goes on a top-down way.

[ljharb]

The most important thing appears last - just like the return from a function.

[0xc00010ff]

jump to the bottom to see the important stuff.
The most important thing appears last - just like the return from a function.

Low quality comment, I understand the reasoning.. but it's funny how Javascript kind of skews our common sense.