The ESLint max-lines-per-function rule is not enabled by default, and that is probably a good thing because it would often flag reasonable function components as too long.
However, the rule can be useful when selectively applied. I believe it can ensure that developers don’t get lazy and pack too much functionality into one function.
In this post we will examine the max-lines-per-function
options, when to use the rule, and how to disable the rule.
Max-Lines-Per-Function with Function Components
It is common in React to use Function Components to create a component. Here’s an example:

As soon as I enable the max-lines-per-function rule, this component will violate a reasonable line limit. However, the function component is mostly filled with JSX, so it doesn’t make sense to apply line length rules to it.
A potential work-around is to use ES6 React.Component
syntax to define a component. However, by default ESLint throws the prefer-stateless-function
error if you try this.
Using ESLint Max-Lines-Per-Function in an Arrow Function
The max-lines-per-function
is smart enough to analyze arrow functions as well. Here’s example code:
/* eslint max-lines-per-function: ["error", 4] */
const testFunction = () => {
let x = 3;
x += 1;
x += 2;
x += 3;
console.log(x);
};
It throws an error specific to arrow functions:

When to Use ESLint Max-Lines-Per-Function
I think there are two good opportunities to use max-lines-per-function
:
- Helper files – If you have a file dedicated to exported functions instead of components, enable the rule at the top of the file.
- Before a Function Component render statement – The rule can be useful for limiting function size in hooks and handlers.
Unfortunately, I was unable to test opportunity 2. In theory, you should be able to control where the rule is applied with code like the following:
/* eslint max-lines-per-function: ["error", {"max": 2, "skipBlankLines": true}] */
CODE CODE CODE
/* eslint-disable max-lines-per-function */
But the rule could not be selectively enabled inside a Function Component because it kept looking at the length of the Function Component itself.
This rule is similar to the max line length rule.
ESLint Max-Lines-Per-Function Options: Max, skipBlankLines, skipComments, and IIFEs
The max-lines-per-function
rule has four options:
- max – This specifies the maximum number of lines a function can be. It includes the beginning and ending lines that contain a curly brace. Default is 50.
- skipBlankLines – By default, blank lines are included in the count of function line length.
- skipComments – By default, lines only containing comments are included in the count of function line length.
- IIFEs – By default, lines of code inside internal immediately invoked functions are not counted.
You may end up taking more lines than necessary depending on your semicolon rule configuration.
Disable Max-Lines-Per-Function
I suggest selectively enabling max-lines-per-function
in useful sections of your code. I’ll go with Bob Martin’s suggestion that 20 lines is a good max length for a function:
/*eslint max-lines-per-function: ["error", 20]*/
There are a couple of options for disabling the rule:
- Change it to “warn” in
.eslintrc.json
like this:"max-lines-per-function": ["warn", { "max": 2, "skipBlankLines": true }]
- Add
/* eslint-disable max-lines-per-function */
– Keep in mind this only works outside of Function Components