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