'Can we use useMemo when memoized object is used in useEffect?

Imagine this case.

A hook that receives an object and based on the object's properties does some computing and returns the result.

export const useTestHook = (someOject) => {
  const [updated, set] = useState({ val1: null, val2: null });

  useEffect(() => {
    set({
      val1: `${someOject.val1}_-`,
      val2: `${someOject.val2}_-`,
    })
  }, [someOject]);

  return updated;
}

The component using the hook has these values separated so a new object needs to be initialized so it can be passed to the hook. The result of the hook is then passed via some callback back to the parent.

function TestComp({ onChange, parentValue }) {
  const [value1, setValue1] = useState('value1');
  const [value2, setValue2] = useState('value2');

  // since mergedValues is used as dependency of the hook I need to 'memoize' it otherwise it gets 
  // recreated on each re-render and will cycle 
  const mergedValues = useMemo(() => ({
    val1: value1,
    val2: value2
  }), [value1, value2]);

  const updatedVals = useTestHook(mergedValues);

  useEffect(() => {
    onChange(updatedVals);
  }, [onChange, updatedVals]);

  return (
    <div>
      Hello
    </div>
  );
}

The parent can do some other computing on that value and the result returns back to the child.

function App() {
  const [value, set] = useState('value1');

  return (
    <TestComp onChange={set} parentValue={value} />
  );
}

What is the correct way to handle object creation in a react component when the object is used as a dependency of some effect? Can be the useMemo hook used for it?

const mergedValues = useMemo(() => ({
    val1: value1,
    val2: value2
  }), [value1, value2]);

Official docs say "You may rely on useMemo as a performance optimization, not as a semantic guarantee." https://reactjs.org/docs/hooks-reference.html#usememo

Another way would be changing the hook's prop from an object to simple values and creating the object from these values inside hook's useEffect but this approach is no go for me.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source