score:2

Accepted answer
  const MyCompA = (props) => (
    <h1>
      {props.text}
      {counter}
    </h1>
  );

  // Equivalent to MyCompA. Gives linting error
  const MyCompB = useMemo(() => (props) => (
    <h1>
      {props.text}
      {counter}
    </h1>
  ));

  // Will only be defined once and not notice changes to counter. Gives linting error
  const MyCompC = useMemo(
    () => (props) => (
      <h1>
        {props.text}
        {counter}
      </h1>
    ),
    []
  );

  // Will notice changes to counter. But generally, this  is not
  // much better than MyCompA
  const MyCompD = useMemo(
    () => (props) => (
      <h1>
        {props.text}
        {counter}
      </h1>
    ),
    [counter]
  );

Related Query

More Query from same tag