updateProps is the controlled way for a component to accept new props. It merges those props into the existing props object, then patches the component so its view reflects the change. section 11.0 section 9.1.1
The method has two small responsibilities:
- Merge incoming props with the current props, preserving values that were not replaced. section 11.1.4
- Call the component's private patching method so the rendered view updates. section 11.1.4
- Let parent-component patching extract new child props and invoke updateProps on the child. section 11.1.4
Minimal implementation
updateProps(props) { this.props = { ...this.props, ...props } this.#patch() } section 11.1.4
Listing 11.6 Updating the props of a component (component.js)
export function defineComponent({ render, state, ...methods }) {
class Component {
// --snip-- //
updateProps(props) {
this.props = { ...this.props, ...props } #1
this.#patch() #2
}
updateState(state) {
this.state = { ...this.state, ...state }
this.#patch()
}
// --snip-- //
}
// --snip-- //
}
Inspect the complete updateProps implementation and compare it with updateState, which follows the same merge-then-patch pattern. section 11.1.4
Listing 11.8 Patching a component node (patch-dom.js)
function patchComponent(oldVdom, newVdom) {
const { component } = oldVdom #1
const { props } = newVdom #2
component.updateProps(props) #3
newVdom.component = component #4
newVdom.el = component.firstElement #5
}
Trace how a patched component virtual node reuses the existing component, passes it new props, and records its component and first DOM element. section 11.1.4
