import React, { useRef, useEffect, useState } from 'react';
import uuid from 'uuid/v4';
import { attempt } from 'lodash-es';
import useModifiedProps from '../UseModifiedProps';
import useAxis from '../UseAxis';

export default function usePlotBandLine(props, plotType) {
  const { id = uuid, children, ...rest } = props;

  const axis = useAxis();
  const idRef = useRef();
  const [plotbandline, setPlotbandline] = useState(null);
  const modifiedProps = useModifiedProps(rest);

  useEffect(() => {
    if (!axis) return;
    if(!plotbandline || modifiedProps !== false) {
      if(!plotbandline) {
        idRef.current = typeof id === 'function' ? id() : id;
      }
      const myId = idRef.current;
      const opts = {
        id: myId,
        ...rest
      };

      if(plotbandline) axis.removePlotBandOrLine(idRef.current);
      setPlotbandline(axis.addPlotBandOrLine(opts, plotType));
    }
  });

  useEffect(() => {
    return () => {
      attempt(axis.removePlotBandOrLine, idRef.current);
    };
  }, []);

  return plotbandline;
}

@@ -765,74 +765,8 @@
   %7D;
-%0A%0A      if(plotbandline) axis.removePlotBandOrLine(idRef.current);
 %0A   
@@ -835,34 +835,8 @@
   %7D%0A
-  %7D);%0A%0A  useEffect(() =%3E %7B
 %0A   
@@ -922,12 +922,8 @@
 %0A  %7D
-, %5B%5D
 );%0A%0A

Revert "Fix plotline getting removed when children present"