React - useMemo giving warning although program is running fine. (useMemo has an unnecessary dependency)

user_9704563 0
Viewed 584

First of all sorry for bad code. I am new to React, so please excuse me :P. Here I have created 2 buttons, "add" and "Change fake". When I click on "add" it will not re-render child component and when I click on "change fake", It does re-render the component because my dependency has changed in useMemo and it creates and sends a new object props to child. But I am getting a warning for useMemo saying it's an unnecessary dependency although I need to dependency. How can I go that warning go away. Is there a better way to do this?

Note: My child component is a dummy component. It does not do anything with those props.

import Child from "./Child";

const Parent = () => {
  const [count, setCount] = useState(0);
  const fakeValue = useRef(10);

  const randomProp = useMemo(() => {
    return { val: fakeValue.current };
  }, [fakeValue.current]);

  const changeFake = () => {
    fakeValue.current = fakeValue.current + 1;
    setCount(count + 1);
  };

  return (
    <>
      <div>{count}</div>
      <div>{fakeValue.current}</div>
      <button onClick={() => setCount(count + 1)}>add</button>
      <button onClick={() => changeFake()}>Change fake</button>
      <Child randomProp={randomProp} />
    </>
  );
};

export default Parent;

Output link: https://i.stack.imgur.com/5spw1.png CodeSandbox link: https://codesandbox.io/s/silly-pine-fzjw9?file=/src/

Maybe a dumb question. But I would appreciate some feedback from the community please :)

react-usememo reactjs
2 Answers

fakeValue.current is an unnecessary dependency because mutating it does not re-render the component. We do not add references as dependencies.

You can remove the warning by adding an empty array as a dependency to useMemo.

const randomProp = useMemo(() => {
  return { val: fakeValue.current };
}, []); // Pass an empty array like this

https://codesandbox.io/s/usememo-warning-67955446-5x8j3

Let me know if you need further support.

user_73626920

When you pass fakeValue.current ref directly into dependency of useMemo it will not change value of randomProp. then child component wont re-render. So you need to do something like this.

const randomValue = fakeValue.current;

  const randomProp = useMemo(() => {
    return { val: randomValue };
  }, [randomValue]);

If re-render not required, just want to remove the warning, you can remove fakeValue.current dependency

CodeSandbox link modified code : https://codesandbox.io/s/stoic-thunder-9ylxi?file=/src/Parent.js

user_78499220
Related