Skip to content

Non-root component event handlers cause memory leaks #510

Closed
@rmorshea

Description

@rmorshea

Originally posted by @mx781 in #509

The following code produces a memory leak because the layout does not release references to the onClick event handler. To observe the leak, just run top -p <PID> where the PID is printed from os.getpid(). We can confirm that this leak results from event handlers because when we remove it, the leak goes away:

import idom
import os


print(os.getpid())


@idom.component
def SomeComponent():
    flag, set_flag = idom.hooks.use_state(True)
    set_flag(not flag)
    return idom.html.div(
        idom.html.button({"onClick": set_flag}, flag),
    )


idom.run(SomeComponent, port=8000)

Interestingly though, if we assign the event handler at the root of the component's structure, the leak goes away:

import idom
import os


print(os.getpid())


@idom.component
def SomeComponent():
    flag, set_flag = idom.hooks.use_state(True)
    set_flag(not flag)
    return idom.html.button({"onClick": set_flag}, flag)


idom.run(SomeComponent, port=8000)

This shows that we're not cleaning up state resulting from elements not at the root of the component.

The leak appears to be pretty small though since I don't think we've every seen the docs crash as a result of running out of memory.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions