question-mark
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.

Trash a component by key

See original GitHub issue

My question is quite simple, regarding this @sophiebits answer about React (https://stackoverflow.com/questions/21749798/how-can-i-reset-a-react-component-including-all-transitively-reachable-state), does Preact completly trash a component if the key props changes ?

Two bonus question :

  • does it reinit the real DOM during this process ?
  • if it does not, how to reset completely the component ?

My use case is that i render a preact (private) library component which i cannot touch, this component contains an html <video> element. In my top level component, i’m trying to change the key on “reset” to destroy the element, and rebuild it from scratch. Expected behaviour : By so, i hope the <video> to reset it’s behaviour, and display the first frame as a preview, in a fresh video ready to play from start. Observed behaviour : The video actually keep it’s playing position between re-render, even with a different key

Issue Analytics

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

github_iconTop GitHub Comments

1reaction
marvinhagemeistercommented, Apr 12, 2019

The recycler is gone with Preact X 🎉

1reaction
DavidBabelcommented, Dec 10, 2018

I see, thanks for your answer, that’s what i experienced, i will check your piece of code and give feedback for googlers.

Thanks for your feedback anyway.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Trash a component by key · Issue #1267 · preactjs/preact
In my top level component, i'm trying to change the key on "reset" to destroy the element, and rebuild it from scratch. Expected...
Read more >
How to remove item from state using key - Stack Overflow
Component { constructor(props) { super(); this.state = { } } trash() { return fetch(DATA_API + this.props.result._id + '/', { method: 'PUT', ...
Read more >
Component System Guide - Rustafied
Tech Trash. One of the most prized components - a key to raiding and some attachments - tech trash is rarely found in...
Read more >
WeakMap - JavaScript - MDN Web Docs
These references prevent the keys from being garbage collected, ... extra data with a DOM element, which the DOM element may access later....
Read more >
Keys for Echelon and Ellipse Locking Trash Cans 45-RGU-KEY
Keys for Echelon and Ellipse Locking Trash Cans 45-RGU-KEY - outdoor & indoor trash cans, recycle bins, & ashtrays for commercial, office or...
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 Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found