Problem: React's useEffect only specifies when code should run. It doesn’t document why it should run or what it should do. This makes useEffect hard to read, debug, and maintain.

Solution: Use a custom ESLint rule to require using a named function.

Here’s a custom rule from @pkerschbaum

Here's the result:

Oh, and here's a key benefit: Many useEffect's are needless or buggy.

And I've found enforcing well-named useEffects helps me notice needless and buggy useEffects in code reviews.

Now I read the function name and ask:
Does this do what it claims?
Does this require a useEffect?

"Just put a comment". Yes, that works too, but:

Code > comment.

✅ Code tends to be kept updated, while comments often get stale. Thus, comments "lie" more often than code.

✅ Named functions improve stack traces which improves debugging and error logging.

✅ Comments…

View original on X