Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

createElement called multiple times even when update always return false

See original GitHub issue

There is a decent chance I misunderstood the README, but I was expecting createElement only be called once if update always returned false, to make embedding of other DOM elements easier.

This doesn’t always seem to be the case when using multiple components. Here is a test-case:

// save as app.js

var html = require('nanohtml')
var morph = require('nanomorph')
var Button = require('./component.js')

var c1 = new Component('a')
var c2 = new Component('b')

var tick = 0

// render both 10 times
for (var i = 0; i < 10; i++) {

// some render function that just updates a counter
function render (c) {
  const b = html`<body>
      ${c.render('hi:' + tick++)}

  morph(document.body, b)
// save as component.js

// This component is the one from the README in the section about mutable components.
// Modified to write out every time createElement is called.

var Nanocomponent = require('nanocomponent')
var html = require('nanohtml')
class Component extends Nanocomponent {
  constructor () {
    this.text = ''
  createElement (text) {
    console.log('Calling createElement')
    this.text = text
    return html`<h1>${text}</h1>`
  update (text) {
    if (text !== this.text) {
      this.text = text
      this.element.innerText = this.text   // Directly update the element
    return false                           // Don't call createElement again
  unload (text) {
    console.log('No longer mounted on the DOM!')

module.exports = Component

Running the above app will result in 20 createElements being written out. If only one component is used then it’s only written out once. Is that working as expected? If so how would you embed a third party dom element.

For now we’ve published a fork of nanomorph that supports short circuiting “guarded” elements for this using and

Thanks for all the great stuff btw! 😃

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:6 (5 by maintainers)

github_iconTop GitHub Comments

mafintoshcommented, Jan 29, 2019

Thanks @ungoldman, that explains the behaivor. I’d suggest we update the example in the README to be more clearer about this,, to not confuse someone else 😃

ungoldmancommented, Jan 25, 2019

Was wondering if you could use npx to execute a bin from an arbitrary github repo… you can!

Read more comments on GitHub >

github_iconTop Results From Across the Web

javascript - Boolean in my object always returning false - Stack ...
The requirement property gets set to true or false immediately on the object's declaration - after it's been evaluated the first time, it...
Read more >
Dispatching custom events - The Modern JavaScript Tutorial
In that case the call to elem.dispatchEvent(event) returns false . And the code that dispatched it knows that it shouldn't continue.
Read more >
setTimeout() - Web APIs - MDN Web Docs
The global setTimeout() method sets a timer which executes a function or specified piece of code once the timer expires.
Read more >
JSX In Depth - React
createElement , the React library must also always be in scope from your JSX ... This use of <div> is legitimate because div...
Read more >
Just Say No to Excessive Re-Rendering in React - GrapeCity
To update a stand-alone React application, users must pass the state ... being called, set the return to false, which cancels the render....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found