pomber / didact

A DIY guide to build your own React

Home Page:https://pomb.us/build-your-own-react/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Why does set state always start the work from root again

hskrishandi opened this issue · comments

Awesome blog post! It has been the best guide that I've ever read and really helped me understand the internals of React Fiber architecture.

One thing that I notice is that inside the useState, the setState will always set nextUnitOfWork = wipRoot, which means Didact will reconcile from the root. And inside updateFunctionComponent, the function component will always call fiber.type(fiber.props) which will cause the component re-render. But I believe this is not the case in React?

For example, we have this structure: https://playcode.io/1603467

<Parent>
  <Children />
</Parent>

const Parent = ({ children }) => {
  console.log('parent re-render')

  return <div>{children}</div>
}

const Children = (props) => {
  const [state, setState] = useState(0);
  console.log('child re-render')

  return <button onClick={() => setState(state+1)}>Click</button>
}

In actual React, when the <Children> button is clicked and setState is invoked, the <Parent> component will not-rerender. It is reflected by the parent console.log, which doesn't run again.

So my question is, how does Didact differ from React in this case? Which React's feature is not implemented in Didact?
Thanks