CODEWITHSUNDEEP
reactjsreact-hooks
user12356906
user12356906

Reputation:

React Hooks How to get to componentWillUnmount

Hello I'm trying to pass the following code to reacthooks:

import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock';

class SomeComponent extends React.Component {
  // 2. Initialise your ref and targetElement here
  targetRef = React.createRef();
  targetElement = null;

  componentDidMount() {
    // 3. Get a target element that you want to persist scrolling for (such as a modal/lightbox/flyout/nav). 
    // Specifically, the target element is the one we would like to allow scroll on (NOT a parent of that element).
    // This is also the element to apply the CSS '-webkit-overflow-scrolling: touch;' if desired.
    this.targetElement = this.targetRef.current; 
  }

  showTargetElement = () => {
    // ... some logic to show target element

    // 4. Disable body scroll
    disableBodyScroll(this.targetElement);
  };

  hideTargetElement = () => {
    // ... some logic to hide target element

    // 5. Re-enable body scroll
    enableBodyScroll(this.targetElement);
  }

  componentWillUnmount() {
    // 5. Useful if we have called disableBodyScroll for multiple target elements,
    // and we just want a kill-switch to undo all that.
    // OR useful for if the `hideTargetElement()` function got circumvented eg. visitor 
    // clicks a link which takes him/her to a different page within the app.
    clearAllBodyScrollLocks();
  }

  render() {   
    return (
      // 6. Pass your ref with the reference to the targetElement to SomeOtherComponent
      <SomeOtherComponent ref={this.targetRef}>
        some JSX to go here
      </SomeOtherComponent> 
    );
  }
}

And then I did the following with hooks:

  const [modalIsOpen, setIsOpen] = useState(false);
  const openModal = () => {
    setIsOpen(true);
  };
  const closeModal = () => {
    setIsOpen(false);
  };

  const targetRef = useRef();

  const showTargetElement = () => {
    disableBodyScroll(targetRef);
  };

  const hideTargetElement = () => {
    enableBodyScroll(targetRef);
  };

  useEffect(() => {
    if (modalIsOpen === true) {
      showTargetElement();
    } else {
      hideTargetElement();
    }
  }, [modalIsOpen]);

I don't know if I did it correctly with useRef and useEffect, but it worked, but I can't imagine how I'm going to get to my componentWillUnmount to call mine:

clearAllBodyScrollLocks ();

Upvotes: 1

Views: 2381

Answers (1)

lawrence-witt
lawrence-witt

Reputation: 9354

The basic equivalents for componentDidMount and componentWillUnmount in React Hooks are:

//componentDidMount
useEffect(() => {
    doSomethingOnMount();
}, [])

//componentWillUnmount
useEffect(() => {
   return () => {
       doSomethingOnUnmount();
   }
}, [])

These can also be combined into one useEffect:

useEffect(() => {
    doSomethingOnMount();
    return () => {
        doSomethingOnUnmount();
    }
}, [])

This process is called effect clean up, you can read more from the documentation.

Upvotes: 7

Related Questions