为什么 React.useCallback 触发重新渲染，你不应该？

Question

I have redux connected Component with onClick action bound to it. Every time I click it rerenders, though I use useCallback hook. Here is my simplified component:

const Map = props => {
  const dispatch = useDispatch(); // from react-redux
  const coordinates = useSelector(state => state.track.coordinates); // from react-redux
  const onClick = useCallback( // from react
    data => {
      return dispatch({type: 'ADD_COORDINATES', payload: data});
    },
    [dispatch]
  );

  return (
    <div className="Map">
      <GoogleMap
        onClick={onClick}>
        <Track
          coordinates={coordinates}
        />
      </GoogleMap>
    </div>
  );
};

Answer 1

Without giving any additional context, and that the component is really "simplified" (there is nothing else that may cause a render), Map component will re-render only on its parent render:

const Parent = () => {
  const coordinates = useSelector(coordinatesSelector);
  return <Map />;
};

On dispatching addCoordinates action you may trigger its parent.

You should try and memoize the Map component:

If your function component renders the same result given the same props, you can wrap it in a call to React.memo for a performance boost in some cases by memoizing the result. This means that React will skip rendering the component, and reuse the last rendered result.

 const Map = () => {
  ...
  return ....;
};

export default React.memo(Map);

---

Edit after question update:

Your component re-renders due to useSelector as stated in the docs:

When an action is dispatched, useSelector() will do a reference comparison of the previous selector result value and the current result value. If they are different, the component will be forced to re-render. If they are the same, the component will not re-render.

Therefore, you might want to add additional equalityFn :

const coordinates = useSelector(state => state.track.coordinates, areSameCoords)