реагировать на хуки updateState внутри useEffect

Question

Я хочу обновить состояние моего компонента внутри useEffect, но сравнивать и обновлять состояние только в случае изменения объекта.

Как я могу это сделать?

Это мой текущий код:

const Features = ({ fetchProductFeature, productFeature }) => {
  const [features, setFeatures] = useState([]);

  const usePrevious = value => {
    const ref = useRef();
    useEffect(() => {
      ref.current = value;
    });
    return ref.current;
  };
  const myPreviousState = usePrevious(productFeature);
  useEffect(() => {
    fetchProductFeature();
    if (myPreviousState && !_.isEqual(myPreviousState, productFeature)) {
      let features =
        productFeature &&
        fetchProductFeature.data &&
        fetchProductFeature.data.map(feature => ({
          label: feature,
          value: false
        }));
      setFeatures(features);
    }
  }, [fetchProductFeature, productFeature, myPreviousState]);

  console.log("productFeature", productFeature);

  if (productFeature.loading) return "Loading...";
  if (productFeature.error) return "Error";
  if (productFeature.data) {

    return (
      <ErrorBoundary>
        <Card>
          {'UI CODE HERE'}
        </Card>
      </ErrorBoundary>
    );
  }
  return null;
};

const mapStateToProps = ({ accountsReducer }) => ({
  productFeature: accountsReducer.productFeature
});

const mapDispatchToProps = dispatch => ({
  fetchProductFeature: () => dispatch(fetchProductFeature())
});    
export default connect(mapStateToProps, mapDispatchToProps)(Features);

Answer 1

Вы можете сравнить свое предыдущее состояние перед установкой состояния, см. Приведенный ниже пример

    useEffect(() => {
      const fetchAndUpdateState = async () => {
        const data = await api.fetchData();
        setFeatures((prevState) => {
          if(deepCompare(prevState,data) {
            return data;
          }
        })
      }
      fetchAndUpdateState();
    }, [])

Также я бы порекомендовал вам использовать loda sh .isEqual для глубокого сравнения https://lodash.com/docs/#isEqual

Answer 2

udeDeepCompare. js

import { useRef, useEffect } from "react";
import _ from "lodash";

function useDeepEffect(fn, deps) {
  const isFirst = useRef(true);
  const prevDeps = useRef(deps);

  useEffect(() => {
    const isSame = prevDeps.current.every((obj, index) =>
      _.isEqual(obj, deps[index])
    );

    if (isFirst.current || !isSame) {
      fn();
    }

    isFirst.current = false;
    prevDeps.current = deps;
  }, deps);
}

export default useDeepEffect;

Особенности. js

useEffect(() => {
    fetchProductFeature();
  }, [fetchProductFeature]);

  useDeepEffect(() => {
    console.log("State changed!");
    let features =
      productFeature.data &&
      productFeature.data.map(feature => ({
        label: feature,
        value: false
      }));
    setFeatures(features);
  }, [productFeature.data]);