eslint-plugin-react-hooks: lint rule to enforce that `useMemo` returns a value
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 251k
- Forks
- 51.4k
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 53
Description
Nothing prevents developers from calling useMemo without a return:
import { useMemo } from "react";
useMemo(() => {
console.log("Yippee!");
}, []);
[TypeScript playground showing no errors]
Calling useMemo without a returned value is somewhat equivalent to calling useEffect without a returned value. Judging by the few times I've seen it happen, it's likely a case of a developer either confusing the two hooks or forgetting to return the memoized value.
Suggestion: can we add a lint rule to flag useMemo calls that don't definitely return a value? It could have a suggestion fixer to switch to useEffect.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in the eslint-plugin-react-hooks package by reading its existing hook rules and their tests. Determine how the rule should identify useMemo callbacks that do not definitely return a value, and whether the optional useEffect suggestion is in scope. Done means covered cases are reported consistently with tests for valid and invalid callbacks.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- eslint, javascript, react
- Domain
- frontend, tooling
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100