Question: Does Preact re-render the whole vdom when a components state changes?

Hello!

I have a bit off-topic question regarding preact internals:

I’m doing a small hobby project in which i am creating a vdom library that can render components(like preact but super simplified) and i’m wondering how react handles the vdom diffing when a component changes state.

Lets say i have this structure:

document.getElementById('root').appendChild(
  <div>
    Some text
    <span>
      Some text
      <SomeComponent />
    </span>
    <p>More text</p>
  </div>
)

Lets now say that SomeComponent has a state change and has to re-render. Does preact patch the the whole vdom or just the SomeComponent and its children?

Currently, if anything changes anywhere, i have to diff & patch the whole vdom tree like this:

const $root = document.getElementById('root')
patch($root, newVdom, oldVdom)

Are you doing something smart to diff only a part of the vdom? I would like to do something like this when something changes in my component:

patch(component.$parentElement, newVdom, oldVdom)

Am i missing something by thinking like this? I tried to go through the source code of Preact but it was a bit too much to wrap my head around exactly how the updates works.

Again, a bit off-topic but i couldn’t help myself. I’m curious how you guys deal with it!

[developit]

Hi there! You’re right to think way - preact re-renders starting from the point where state changed. It’s a nice little optimization!

[linde12]

Diffing against the real DOM makes sense. I’ll continue with this approach for now and look around in the source of preact. Closing this, thanks again. Inspiring stuff you’ve done with Preact! 👍