anthonyshort / deku

Render interfaces using pure functions and virtual DOM
https://github.com/anthonyshort/deku/tree/master/docs
3.41k stars 130 forks source link

Question: Re-render behavior of Function components. #392

Closed thebearingedge closed 8 years ago

thebearingedge commented 8 years ago

Hello,

I can't find it in the docs but as of 2.0.0-rc15, it looks like a component can just be a function.

const App = (model) => {
  // some JSX or whatever
}

But whenever I render this component the DOM is created anew.

App.onCreate = () => console.log('onCreate')
App.onUpdate = () => console.log('onUpdate')

Re-rendering never calls onUpdate, but instead, always onCreate. I couldn't find any reason for this in the source. Rewriting the component as an Object works as expected, i.e. subsequent renders perform an update to the DOM and onUpdate is called.

Are function components staying? Is there a fix I can submit? I couldn't seem to find the trouble spot. This looks right to me... but I would like to try a PR if there is another area of the source you can point me to.

Thanks for the great library!

anthonyshort commented 8 years ago

Hey! Great catch. I haven't been using function components, so it looks like I've missed this one. Looks like we'll need to add some more tests for the lifecycle hooks for function components.

My bet is that it's this line and then this line. Because it's creating a new object every time, the diff will see them as two separate objects and think they're different components.

We might need to change it so that it just stores the function as the component, and we just do a check later when we want to render to see if it's an object or function. That way we don't need to create this dummy object.

thebearingedge commented 8 years ago

I will work on it tonight!