Naval Pilgrim's Mayflower

    use-state-if-mounted
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.7 • Public • Published

    useStateIfMounted

    A hook for updating state only if the component is mounted. Find it on npm, or add it to your project :

    $ npm install use-state-if-mounted
    # or
    $ yarn add use-state-if-mounted

    🔴 UPDATE

    This "solution" doesn't avoid leaks. Even AbortController doesn't seem to be the silver bullet against memory leaks 😰. Check out the discussion in the comments!


    How to use

    Use this hook just like React's useState.

    This one hook only updates state if the component that called this hook is mounted. This allows us to avoid memory leaks and messages like this one :

    Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. in Child (created by Holder)
    

    Examples

    Basic usage

    const [count, setCount] = useStateIfMounted(0);

    "Real use case" usage

    Based from this issue from Github.

    const apiCall = n =>
    new Promise(resolve => setTimeout(() => resolve(n + 1), 3000));
    
    const ShowApiCallResult = () => {
    const [n, setN] = useState(0);
    useEffect(() => {
      apiCall(n).then(newN => setN(newN));
    });
    
    return String(n);
    };
    
    const RemoveComponentWithPendingApiCall = () => {
    const [show, setShow] = useState(true);
    return (
      <React.Fragment>
        <button onClick={() => setShow(false)}>Click me</button>
        {show && <ShowApiCallResult />}
      </React.Fragment>
    );
    };

    See CodeSandbox.

    The issue can be fixed with our hook by simply replacing useState with useStateIfMounted :

    const apiCall = n =>
    new Promise(resolve => setTimeout(() => resolve(n + 1), 3000));
    
    const ShowApiCallResult = () => {
    const [n, setN] = useStateIfMounted(0); // notice the change 🚀
    useEffect(() => {
      apiCall(n).then(newN => setN(newN));
    });
    
    return String(n);
    };
    
    const RemoveComponentWithPendingApiCall = () => {
    const [show, setShow] = useState(true); // this setShow will never cause a memory leak in this situation
    // so we can use vanilla setState
    return (
      <React.Fragment>
        <button onClick={() => setShow(false)}>Click me</button>
        {show && <ShowApiCallResult />}
      </React.Fragment>
    );
    };

    See CodeSandbox.

    Install

    npm i use-state-if-mounted

    DownloadsWeekly Downloads

    1,788

    Version

    1.0.7

    License

    MIT

    Unpacked Size

    7.56 kB

    Total Files

    7

    Last publish

    Collaborators

    • nans