no-unnecessary-use-memo

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

Description

Disallow unnecessary usage of useMemo.

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. If the calculated variable is only used inside one useEffect the calculation can be moved inside the useEffect Function.

Examples

Failing

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>;
}

Passing

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

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

Description

Examples

Failing

Passing

Implementation

See Also

On this page