ensure-use-memo-has-non-empty-deps

Rule category

Pedantic.

What it does

Warns when useMemo is called with empty dependencies array.

Why is this bad?

React Hooks useMemo has empty dependencies array like what’s in the examples, are unnecessary. The hook can be removed and it’s value can be calculated in the component body or hoisted to the outer scope of the component.

Examples

Failing

import React, { useMemo } from "react";
import { Button, MantineTheme } from "@mantine/core";
 
function Example() {
  // useCallback has empty dependencies array
  const style = useMemo(
    (theme: MantineTheme) => ({
      input: {
        fontFamily: theme.fontFamilyMonospace,
      },
    }),
    []
  );
  return <Button sx={style} />;
}

Passing

import React from "react";
import { Button, MantineTheme } from "@mantine/core";
 
const style = (theme: MantineTheme) => ({
  input: {
    fontFamily: theme.fontFamilyMonospace,
  },
});
 
function Example() {
  return <Button sx={style} />;
}

hooks-extra/ensure-use-callback-has-non-empty-deps hooks-extra/prefer-use-state-lazy-initialization