在 useEffect 内反应钩子 updateState

Question

I want to update my component's state inside of useEffect but compare and update the state only if the object has changed.

How can I do that?

This is my current code:

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

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;

Features.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]);

Answer 2

You can compare your previous state before setting the state, see the below example

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

Also, I would recommend you to use lodash.isEqual for deep comparison https://lodash.com/docs/#isEqual