Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Is re-executing the render function locally a good practice? #405

Closed
danielo515 opened this issue Dec 8, 2020 · 4 comments
Closed

Is re-executing the render function locally a good practice? #405

danielo515 opened this issue Dec 8, 2020 · 4 comments

Comments

@danielo515
Copy link

While using hyperhtml I found myself following this pattern:

function ParentComponent(){
   return bind(domNode)`
    <div>
        ${ChildComponent({ data })
    </div>
   `
}

function ChildComponent({ data }){
   wire(data, ':child-component')`
    <div>
        ${ data.map(Stuff) }
        ${Button({ onClick: () => ChildComponent({ data }) })
    </div>
   `

So, the child-component has the ability to render itself by calling the function with the same data, and if something within the data has changed it will re-render that parts. Not all components pass something to wire, some just do dumb wires, but some others do.
This is working flawlessly, and my understanding is that, as long as I pass the proper reference objects + id I will not get 'reference clashes' (it happened to me once, and it was very weird because I was using the same reference object for two components).
Is this some kind of anti-pattern? or is it OK on the hyperhtml world?

Thanks in advance.
@WebReflection
Copy link
Owner

differently from uhtml and lighterhtml, hyperHTML doesn't have a stack concept in core, meaning same reference object, with same ID, in two places, will simply move the same node in the last place that used such reference.

However, what I see here is a replica of what uland or neverland do, meaning there's nothing inherently wrong with your pattern, but hyperHTML has its own component system which, if not used, is sleeping code with no meaning, while those other libraries are born to provide this very same patern, and likely better at that, without you ever needing to reference explicitly anything.

I hope this answer helps 👋

@danielo515
Copy link
Author

Yes @WebReflection , it helps. I'll take a look into neverland then.
I started using hyperHtml and I was wondering when would I should switch to one of the smaller alternatives. Probably the time is now.

@WebReflection
Copy link
Owner

P.S. for an "as close as React" solution, I suggest checking kaboobie out too 👍

@danielo515
Copy link
Author

thanks for the suggestion, but being as close to react as possible is not a requirement for me 😄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants