I put 18 event handlers on a React element

Thomas Pikauli on January 28, 2019

If you've ever built a React app you've probably encountered a SyntheticEvent. Good chance it was onChange, but maybe you've been a little more... [Read Full]
markdown guide
 

Thanks Thomas for the post~ 👍

The result is amazing (and pretty 🙂).
I never knew so many events can be fired and be handled.

This post and the CodeSandbox demo gave me a pretty good idea what event to throttle/debounce.


And you might also want to give @codesandbox a tweet with the Sandbox link to be picked on CodeSandbox Explore page (Refer to doc on how to get picked -> codesandbox.io/docs/explore#how-ca...)

 

Wow, thanks for your response Sung! Really appreciate it :)

Very curious what you're going to build. I'll definitely tweet codesandbox too!

 

I've never dived deep into Synthetic events as it was more of trial & error for using them.

You can see a site I built there in the Explore page (search for bunpkg 🙂)

Very cool! It's always nice if you can use your keyboard to navigate lists :)

 

Some of those are really strange.
Eg if I hold backspace, it keeps counting keyDown but doesn't add even one keyPress. Whereas if I hold a letter key, it keeps spamming both?

 

I think the difference has to do with keyPress only registering actual characters like letters and numbers, while keyDown registers any key.

 

I feel like in both cases keyDown should fire once per physical press and then wait for keyUp before being able to fire again for this keycode. In nether case did it do that.

keyPress on the other hand can do whatever it damn pleases, including reacting only to characters appearing, I don't care :v

 

The title is a meme in itself and the result is art! Love it!
Really appreciate the left-of-center, superfluous yet extremely informative approach to talking about a core subject!
Sidenote: this pushed me to see how easy Immer is maybe I won't set up ImmutableJS on my next project.

 

Thanks a lot, really appreciate it :D

I'm not super familiar with ImmutableJS, but definitely give Immer a try and see if you can get away with just using that :)

code of conduct - report abuse