Как использовать componentWillMount() в React Hooks

С появлением хуков в react многие перешли на написание компонентов в функциональном стиле, но появились некоторые пробелы в документации. Один из таких пробелов — как выполнить функцию во время «демонтажа» компонента, т.е. внутри как бы componentWillMount.

TL;DR

import React, { useCallback, useEffect } from 'react'

export const Example = () => {
    const fn = useCallback(() => {
        console.log('Unmount')
    }, [])

    useEffect(()=>{
        /**
         * Верните функцию которая 
         * должна выполниться на Unmount 
         */

        return fn
    }, [fn])

    return // JSX
}

Не используйте другие зависимости внутри useEffect, который возвращает функцию для Unmount

useUnmount

Некоторое время назад я заметил, что стала популярной библиотека react-use. Она представляет собой набор различных хуков, содержит и useUnmount.

// установите библиотеку
npm i react-use

import {useUnmount} from 'react-use';

const Demo = () => {
    useUnmount(() => alert('UNMOUNTED'));
    return null;
};

Это очень простое и компактное API.

Удачного кодинга