no-unnecessary-use-memo

This rule is experimental and may change in the future or be removed. It is not recommended for use in production code at this time.

Full Name in @eslint-react/eslint-plugin

@eslint-react/no-unnecessary-use-memo

Full Name in eslint-plugin-react-x

react-x/no-unnecessary-use-memo

Features

🧪

Presets

strict strict-typescript strict-type-checked

Rule Details

The React Hook useMemo with an empty dependencies array, as in the examples, is unnecessary. The hook can be removed, and its value can be calculated in the component body or hoisted to the outer scope of the component. If the calculated variable is used only inside one useEffect, the calculation can be moved inside the useEffect function.

Common Violations

Invalid

import { Button, MantineTheme } from "@mantine/core";
import React, { useMemo } from "react";

function MyComponent() {
  const style = useMemo(
    (theme: MantineTheme) => ({
      input: {
        fontFamily: theme.fontFamilyMonospace,
      },
    }),
    [],
  );
  return <Button sx={style} />;
}

import { Button, MantineTheme } from "@mantine/core";
import React, { useMemo, useEffect } from "react";

function MyComponent({ someNumbers }: { someNumbers: number[] }) {
  const calculatedNumber = useMemo(
    () => someNumbers.reduce((prev, next) => prev + next, 0),
    [someNumbers],
  );

  useEffect(() => {
    console.log(calculatedNumber);
  }, [calculatedNumber]);
  return <div>Hello World!</div>;
}

Valid

import { Button, MantineTheme } from "@mantine/core";

const style = (theme: MantineTheme) => ({
  input: {
    fontFamily: theme.fontFamilyMonospace,
  },
});

function MyComponent() {
  return <Button sx={style} />;
}

import { Button, MantineTheme } from "@mantine/core";
import React, { useEffect } from "react";

function MyComponent({ someNumbers }: { someNumbers: number[] }) {
  useEffect(() => {
    const calculatedNumber = someNumbers.reduce((prev, next) => prev + next, 0);
    console.log(calculatedNumber);
  }, [someNumbers]);
  return <div>Hello World!</div>;
}

no-unnecessary-use-memo

Rule Details

Common Violations

Invalid

Valid

Resources

Further Reading

See Also

On this page