react / react/react

eslint-plugin-react-hooks: lint rule to enforce that `useMemo` returns a value

Open
#25,379 9 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Component: ESLint Rules Type: Feature Request
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.