javascript - Change detection in React

Question

I'd like to perform a side-effect when some data changes, e.g.

const useSearchResults = () => {
  const location = useLocation();
  const [data, setData] = useState();
  useEffect(() => {
    Api.search(location.query.q).then(data => setData(data));
  }, [location.query.q]);

  // Compute some derived data from `data`.
  const searchResults =
    data &&
    data.map(item => ({
      id: item.id,
      name: `${item.firstName} ${item.lastName}`
    }));

  return searchResults;
};

const Component = () => {
  const searchResults = useSearchResults();
  useEffect(() => {
    alert('Search results have changed'); // Side-effect
  }, [searchResults]);
  return <pre>{JSON.stringify(searchResults)}</pre>;
};

If something causes Component to re-render, the alert will fire even if the searchResults haven't changed because we map over the underlying stable data in useSearchResults creating a new instance on every render.

My initial approach would be to use useMemo:

  // Stabilise `searchResults`'s identity with useMemo.
  const searchResults = useMemo(
    () =>
      data &&
      data.map(item => ({
        id: item.id,
        name: `${item.firstName} ${item.lastName}`
      })),
    [data]
  );

However useMemo has no semantic guarantee so it's (theoretically) only good for performance optimisations.

Does React offer a straight forward solution to this (common?) problem?

question from:https://stackoverflow.com/questions/66064561/change-detection-in-react

Answer 1

If it's very important that the side effect doesn't re-run, you can base your comparison on a deep equality check. We want to see that the search results are actually different results and not just a new array with the same results.

There are various implementations of a usePrevious hook floating around that you can use, but basically it's just a ref. Save the previous version of the search results to a ref. When your effect runs, see if the current results are different than the previous results. If they are, do your side effect and update the previous to the current.

const Component = () => {
  const searchResults = useSearchResults();

  // create ref for previous
  const comparisonRef = useRef('');

  useEffect(() => {
    // stringify to compare
    if ( JSON.stringify(searchResults) !== JSON.stringify(comparisonRef.current) ) {
       // run side effect only if true
       alert('Search results have changed');
       // update the ref for the next check
       comparisonRef.current = searchResults;
    }
  }, [searchResults, comparisonRef]);

  return <pre>{JSON.stringify(searchResults)}</pre>;
};