DOM elements duplicated on rerendering about preact HOT 14 CLOSED

https://github.com/developit/preact/wiki/Differences-to-React#whats-different

from preact.

Gee, wouldn't it make more sense to make React's behavior the default, and then change behavior if there is a third argument?

from preact.

The second argument is still required. Third argument is the node to replace, second is where to mount.

See this issue: #24

Let me know if that doesn't solve it for you.

- edit -
So your example would be:

let parent = document.getElementById('app');
// call this as often as you want:
render(h(HelloWorld), parent, parent.lastChild);

from preact.

@ayZagen That sounds indeed like an issue. Can you open a new one?

This one is for a different release line and has long been fixed. Even though the symptoms look similar it's probably a different issue. A codesandbox or a repo where the issue can be reproduced is an incredible helpful thing in getting to the bottom of it. Strongly recommend including that 👍

from preact.

I couldn't reproduce issue with only preact. Using Prism.highlightAll() breaks it. I will look into prismjs and will try to reproduce the issue

from preact.

@marvinhagemeister - #3236

from preact.

@c2h5oh thanks. It is always all the way down when I look for something.

from preact.

@c2h5oh so I tried render(h(HelloWorld), null, document.getElementById('app')) but that is giving me

Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

And if I do render(h(HelloWorld), document.getElementById('app'), document.getElementById('app')) that doesn't render anything.

from preact.

I definitely agree with @qwertie. I am trying to migrate my gatsby site to preact and I couldn't find any way to pass replaceNode argument. I think this line here makes it impossible to pass the argument as gatsby uses preact/compat under hood.

from preact.

@ayZagen React's behaviour has been the default in Preact since the beginning of the 10.x release line, which started more than a year ago. You don't need to pass the third parameter anymore to match that behavior.

from preact.

Thanks for the quick reply. I have tried 10.4.8 and faced with this issue. This is the component:

const HttpSnippet = ({ request, language, codeRef }) => {

  const harRequest = createHarFromOpenApiRequest(request, language)
  const snippet = new SnippetCreator(harRequest)
  const code = snippet.convert(language)
  const lineCount = code.split(/\r\n|\r|\n/).length

  useEffect(()=>{
    Prism.highlightAll()
  }, [language])

  return (
    <>
      <div className="line-counts">
        { Array(lineCount).fill().map((count, index) => (<div key={index}>{index + 1}</div>))}
      </div>
      <pre>
          <code className={`language-${language}`} key={language} ref={codeRef}>{ code }</code>
      </pre>
    </>
  )
}

code element textContent gets duplicated on every rerender

from preact.

@ayZagen Did you ever find out what was causing this issue? I'm seeing something similar to what you're describing.

from preact.

@jakedee sorry, I couldn't dig deep for it and migrated back to react in our gatsby project.

from preact.

@jakedee Can you open a new issue for that?

from preact.