How do I stop a dynamic Gutenberg component from re-rendering on every keystroke?

I'm using some dynamic components inside a custom block; predominantly used for input fields inside the InspectorControls component. Below are the relevant portions of the custom block.

import summaryTypes from './components'

// Dynamically set the component
function SummaryTitle(props) {
    const ThisComponent = summaryTypes.find((c) = c.value === summaryType).components.title
    return ThisComponent {...props}/
}

// Slot fill provider
const TitleSlotFill = () = {
    const TitleSlot = () = Slot name=TitleSlot/
    TitleSlot.Content = () = (
        Fill name=TitleSlot
            SummaryTitle
                content={title}
                onUpdate={(title) = setAttributes({title})}
            /
        /Fill
    )
    return (
        SlotFillProvider
            TitleSlot/
            TitleSlot.Content/
        /SlotFillProvider
    )
}

// Render
return (
    
        InspectorControls
            Panel
                ...
                TitleSlotFill/
                ...
            /Panel
        /InspectorControls
    /
)

Everything displays correctly, however whenever the onUpdate function prop runs, the input (a TextControl component) loses focus. Obviously this doesn't happen when using the TextControl directly, and after doing some searching it seems that something somewhere in the chain is being re-rendered.

My question is, how can I prevent this re-rendering from happening, and keep focus on the input while typing?

Topic block-editor Wordpress

Category Web

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.