Как использовать реактивные крюки с редуксом и неизменяемым js?

Question

Я использую реаги, редукцию с неизменяемым js. Я сталкиваюсь с проблемой, когда использую useEffect или аналогичные перехватчики с не примитивными данными, этот эффект работает, даже если он не изменился, поскольку я использую ho c, рекомендованный redux docs .

Есть ли у кого-нибудь решение или лучшая практика для использования неизменяемого js и приставки с перехватчиками реагирования?

Это мой родительский компонент.

import { useSelector, useDispatch } from "react-redux";
import { setValue, getValue, getData } from "./store";

import "./styles.css";
import Child from "./Child";

export default function App() {
  const data = useSelector(getData);
  const value = useSelector(getValue);
  const dispatch = useDispatch();
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={() => dispatch(setValue(value + 1))}>
        Change Value
      </button>
      <Child value={value} data={data} />
    </div>
  );
}

Это дочерний компонент, который является завернутый в JS ho c

import { toJS } from "./hoc";

function Child(props) {
  useEffect(() => {
    // this runs even if only props.value has changed.
    console.log(props.data, "changed"); 
  }, [props.data]);
  return <div>{props.value}</div>;
}

export default toJS(Child);

Воспроизводимый пример: