Repository: recharts/recharts
File: src/cartesian/YAxis.tsx (TypeScript)

Code before:
function SetYAxisSettings(settings: YAxisSettings): null {
  const dispatch = useAppDispatch();
  useEffect(() => {
    dispatch(addYAxis(settings));
    return () => {
      dispatch(removeYAxis(settings));
    };
  }, [settings, dispatch]);
  return null;
}

const YAxisImpl: FunctionComponent<Props> = (props: Props) => {
  const { yAxisId, className, width, label } = props;

  const cartesianAxisRef = useRef(null);
  const labelRef = useRef(null);

  const viewBox = useAppSelector(selectAxisViewBox);
  const isPanorama = useIsPanorama();
  const dispatch = useAppDispatch();
  const axisType = 'yAxis';
  const scale = useAppSelector(state => selectAxisScale(state, axisType, yAxisId, isPanorama));
  const axisSize = useAppSelector(state => selectYAxisSize(state, yAxisId));
  const position = useAppSelector(state => selectYAxisPosition(state, yAxisId));
  const cartesianTickItems = useAppSelector(state => selectTicksOfAxis(state, axisType, yAxisId, isPanorama));
  const axisSettings = useAppSelector(state => selectYAxisSettings(state, yAxisId));

  useLayoutEffect(() => {
    // No dynamic width calculation is done when width !== 'auto'
    // or when a function/react element is used for label
    if (width !== 'auto' || !axisSize || isLabelContentAFunction(label) || isValidElement(label)) return;

    const axisComponent = cartesianAxisRef.current;
    const tickNodes = axisComponent?.tickRefs?.current;

    const { tickSize, tickMargin } = axisComponent.props;

    // get calculated width based on the label width, ticks etc
    const updatedYAxisWidth = getCalculatedYAxisWidth({
      ticks: tickNodes,
      label: labelRef.current,
      labelGapWithTick: 5,
      tickSize,
      tickMargin,
    });

    // if the width has changed, dispatch an action to update the width
    if (Math.round(axisSize.width) !== Math.round(updatedYAxisWidth))
      dispatch(updateYAxisWidth({ id: yAxisId, width: updatedYAxisWidth }));
  }, [
    cartesianAxisRef,

Review comment (suggestion):
now that I think about it, why do you need to select this from axis settings when this is the component has access to padding in props?

you should be able to access padding with `props.padding` for both axes.

See line 153

Code after:
  const dispatch = useAppDispatch();
  useEffect(() => {
    dispatch(addYAxis(settings));
    return () => {
      dispatch(removeYAxis(settings));
    };
  }, [settings, dispatch]);
  return null;
}

const YAxisImpl: FunctionComponent<Props> = (props: Props) => {
  const { yAxisId, className, width, label } = props;

  const cartesianAxisRef = useRef(null);
  const labelRef = useRef(null);

  const viewBox = useAppSelector(selectAxisViewBox);
  const isPanorama = useIsPanorama();
  const dispatch = useAppDispatch();
  const axisType = 'yAxis';
  const scale = useAppSelector(state => selectAxisScale(state, axisType, yAxisId, isPanorama));
  const axisSize = useAppSelector(state => selectYAxisSize(state, yAxisId));
  const position = useAppSelector(state => selectYAxisPosition(state, yAxisId));
  const cartesianTickItems = useAppSelector(state => selectTicksOfAxis(state, axisType, yAxisId, isPanorama));

  useLayoutEffect(() => {
    // No dynamic width calculation is done when width !== 'auto'
    // or when a function/react element is used for label
    if (width !== 'auto' || !axisSize || isLabelContentAFunction(label) || isValidElement(label)) return;

    const axisComponent = cartesianAxisRef.current;
    const tickNodes = axisComponent?.tickRefs?.current;

    const { tickSize, tickMargin } = axisComponent.props;

    // get calculated width based on the label width, ticks etc
    const updatedYAxisWidth = getCalculatedYAxisWidth({
      ticks: tickNodes,
      label: labelRef.current,
      labelGapWithTick: 5,
      tickSize,
      tickMargin,
    });

    // if the width has changed, dispatch an action to update the width
    if (Math.round(axisSize.width) !== Math.round(updatedYAxisWidth))
      dispatch(updateYAxisWidth({ id: yAxisId, width: updatedYAxisWidth }));
  }, [
    cartesianAxisRef,
    cartesianAxisRef?.current?.tickRefs?.current, // required to do re-calculation when using brush
    axisSize?.width,