Replace Component with another one and preserve focus

Hello everyone. I’m writing Vaadin components wrapper that utilizes react-like functional style - e.g. function that receives properties and returns component to render.
This means when underlying state changes (lets say we change TextField value) new components are created to replace old ones.
The problem is that when components are removed from their host and added, focus is lost, even when component is totally similar to the old one.
Do you know the way to adjust new component’s properties so that Vaadin engine treat it as the previous one?
I know this is out of the way Components were designed, so I feel like I need to utilize lower level Elements API or do some other trick for this to work, but there’s much less docs on this than on Components.

public class FunctionalComponent

extends Div {

private final Observable<P> propertiesObservable = Observable.notInitialized();

private FunctionalComponent(@NonNull BiFunction<P, Consumer<P>, Component> renderFunction) {
    propertiesObservable.subscribe((nextProperties, propertiesSink) -> {
        Component nextComponent = renderFunction.apply(nextProperties, propertiesSink);
        
        Component currentComponent = getChildren().findFirst().orElse(null);
        
        if (currentComponent != null) {
            remove(currentComponent);
            
            add(nextComponent);
        } else {
            add(nextComponent);
        }
    });
}

public void setProperties(P properties) {
    propertiesObservable.set(properties);
}

public static <P> FunctionalComponent<P> create(
        @NonNull P initialProperties,
        @NonNull BiFunction<P, Consumer<P>, Component> renderFunction) {
    FunctionalComponent<P> component = new FunctionalComponent<>(renderFunction);
    component.setProperties(initialProperties);
    return component;
}

public static <P> FunctionalComponent<P> create(
        @NonNull P initialProperties,
        @NonNull Function<P, Component> renderFunction) {
    return create(initialProperties, (nextProperties, propertiesSink) -> renderFunction.apply(nextProperties));
}

}

That won’t work. You have to manage all of the states yourself. Additionally this sounds like a huge performance problem in the long run if you always replace the components instead of letting Vaadin handle the state diff

If I understood correctly, you’d like to define your UIs as a function of state. You might be interested in this Labs experiment: https://vaadin.com/labs/viewmodel

Thank you! Yes, I think, you get the idea pretty close. The project in the link is good, but, unfortunately, is does not provide the core feature I’m aiming at.
I want to have a single stateless (in most cases) function that creates component tree. This is important as developer would look for only one place to apply any code changes.
The provided approach is about creating multiple bindings that with large scale make UI difficult to properly change.
May be there’s a way to create a Composite-like Component that can change it’s content dynamically? I’m also thinking about looking into complex components like Grid. There should be some mechanics to preserve focus when item is updated.
For now I created a crutch to catch focus events, store focused component and restore focus on rerender.