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.

Best practice for DOM side effects

See original GitHub issue

What is the recommended way of handling side effects for the DOM?

From what I can see there are two different types of DOM side-effects:

  • Event related: preventDefault(), stopPropagation(), stopImmediatePropagation(), event.dataTransfer, event.clipboardData just to name a few
  • Methods of dom elements: focus(), blur(), click(), dispatchEvent()

From my understanding, all these side-effects should happen inside a driver. Is there any official (or unofficial) driver that handles any of these side effects? In absence of such a driver, I’m currently putting all my side effects directly inside my component intents, eg. DOM.select('.x').events('click').do(event => event.preventDefault()). This feels a bit hackish.

Also, assuming there would be a driver for every side-effect, it seems a bit tedious and error-prone to have to forward and merge all these “side-effect-sinks” up from each and every component. This also means that parent-components needs to be aware of all the sinks that needs to be forwarded up the chain. Or is there perhaps a better way?

Related: #153 #202 #65

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Reactions:2
  • Comments:23 (14 by maintainers)

github_iconTop GitHub Comments

4reactions
laszlokortecommented, Mar 10, 2016

@whitecolor but then you would have to have DOM.preventDefault() cause the side effect so it would have no benefit over .do(event => event.preventDefault())

1reaction
deadbeef84commented, Mar 16, 2016

@staltz I think the link you provided (https://github.com/cyclejs/examples/blob/master/autocomplete-search/src/main.js#L21) actually highlights the problem. In the example a very specific driver is created, one that not only preventDefault() but also set focus if the event type is ‘blur’. If there was an official solution to handle this, hacks like this wouldn’t be necessary.

Also, I think this forces everyone to create their own drivers for handling a very common use case. Eventually we will have projects with side effects directly in their intents (like I’m currently doing 👎) or lots of different implementations of an event-driver doing pretty much the same thing which is also not very nice. I would expect this to already be solved by the framework, perhaps by cycle-dom?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Domperidone (Oral Route) Side Effects - Mayo Clinic
Symptoms of overdose · Difficulty in speaking · disorientation · dizziness · fainting · irregular heartbeat · light-headedness · loss of balance or ......
Read more >
Dealing with side effects and pure functions in javascript
What we want to do is to treat our effects as regular data, have the ability to manipulate them and even chain other...
Read more >
How to deal with dirty side effects in your pure functional ...
Dependency injection works by moving the impure parts of the code out of the function. So you have to pass them in as...
Read more >
How to solve the "Avoid an excessive DOM size" warning
If you're reading this article, chances are you've run into an “Avoid an excessive DOM size” warning from Google Lighthouse.
Read more >
React Hooks cheat sheet: Best practices with examples
Included in this React Hooks cheat sheet are best practices related to ... to the DOM as a side effect, useEffect won't be...
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